Tạo thông báo nổi giữa màn hình với hiệu ứng fadeOut

Quản trị viên tháng 1 01, 2018 #CSS #Javascript #Popup #Thủ Thuật Blogspot

Code tạo Popup thông báo nổi giữa màn hình tự động hiện khi vào trang, có nút tắt hoặc bấm vào bất cứ vị trí nào trên màn hình để tắt. Được tạo từ CSS và Javascript.

Tạo thông báo nổi giữa màn hình với hiệu ứng fadeOut

Quăng hết đống nào vào trước </body>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(key,value,options){if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options);if(value===null||value===undefined){options.expires=-1;}
if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}
value=String(value);return(document.cookie=[encodeURIComponent(key),'=',options.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}
options=value||{};var result,decode=options.raw?function(s){return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;};
//]]>
</script>
<script type='text/javascript'>//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('1m(W(p,a,c,k,e,d){e=W(c){Y c};1b(!\'\'.1i(/^/,1l)){1c(c--){d[c]=k[c]||c}k=[W(e){Y d[e]}];e=W(){Y\'\\\\w+\'};c=1};1c(c--){1b(k[c]){p=p.1i(1n 1j(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c])}}Y p}(\'1x(26(24,27,21,23,22,25){22=26(21){X(21<27?\\\'\\\':22(2c(21/27)))+((21=21%27)>2b?1h.2a(21+29):21.2d(2e))};1e(!\\\'\\\'.1g(/^/,1h)){1f(21--){25[22(21)]=23[21]||22(21)}23=[26(22){X 25[22]}];22=26(){X\\\'\\\\\\\\1v+\\\'};21=1};1f(21--){1e(23[21]){24=24.1g(1u 1k(\\\'\\\\\\\\1a\\\'+22(21)+\\\'\\\\\\\\1a\\\',\\\'1r\\\'),23[21])}}X 24}(\\\'2g(28(24,27,21,23,22,25){22=28(21){Z 21};1d(!\\\\\\\'\\\\\\\'.1s(/^/,2f)){1t(21--){25[21]=23[21]||21}23=[28(22){Z 25[22]}];22=28(){Z\\\\\\\'\\\\\\\\\\\\\\\\1v+\\\\\\\'};21=1};1t(21--){1d(23[21]){24=24.1s(1Z 1Y(\\\\\\\'\\\\\\\\\\\\\\\\1a\\\\\\\'+22(21)+\\\\\\\'\\\\\\\\\\\\\\\\1a\\\\\\\',\\\\\\\'1r\\\\\\\'),23[21])}}Z 24}(\\\\\\\'7(1o).8(0($){1S($.5("6")!="9"){$("#3-2-4").1R(1Q).1T("1");$("#1U, #1X").1W(0(){$("#3-2-4").1V().2h("1")})}});\\\\\\\',1o,2i,\\\\\\\'28|2u|2t|2s|2v|2w|2y|2x|2r|2q|2l|1d|2k|1P|2m|2n|2p|2o|2z|1I\\\\\\\'.1z(\\\\\\\'|\\\\\\\'),0,{}))\\\',1w,1w,\\\'|||||||||||||||26||X|1e|1f||1g|10|15|1h||13|1x|14|16|18|1u||1k|11|19|1O|17|12|20|1K|1D|1N|1E|1F|1G|1p|1H|2A|1L|1J|1M|1C|1B|1A|1y|2j|2P\\\'.1p(\\\'|\\\'),0,{}))\',10,2S,\'|||||||||||||||||||||c|e|k|p|d|W|a|f||Y|b|h|1i|1b|||1l|i|1c|m|1n|1m|1j|j|g|1q|l|w|A|N|2J|D|2K|R|Q|U|y||V|T|P|2T|r|n|v|t|C|x|q|u|o|z|B|s|S|O|2U|2W|2V|2O|2B|2G|2H|2M|2I|2N|2L|2C|2D|2E|2F|I|J|E|F|H|G|M|L||2Q|2R|K\'.1q(\'|\'),0,{}))',62,183,'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||function|30|return|32|||||||||||31|if|while|38|34|39|33|37|replace|RegExp|43|String|eval|new|40|46|split|45|47|44|41|48|58|42|91|103|90|81|82|85|88|89|84|83|99|79|86|77|80|87|100|97|73|72|57|70|67|69|64|66|68|65|||||||||||53|35|51|62|36|71|63|74|52|101|96|76|95|94|93|92|75|56|54|50|49|55|61|59|60|98|78|bacsiwindows|closebox|boxclose|yes|popup_facebook_box|vt|delay|fadeOut|parseInt|fromCharCode|stop|1000|click|cookie|102|ready|jQuery|104|toString|popup|document|fadeIn'.split('|'),0,{}))
//]]></script>
<style>
#bacsiwindows-popup-vt {display: none; background: #FFF; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none}
#boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#boxview {width: 100%; position: absolute; top: 30%; left: 0; background:white; padding:25px 0}
#closebox {float: right; cursor: pointer; position: fixed; right: 20px; top: 25px}
#closebox:before {font-family: FontAwesome; content: "\f00d"; padding: 10px 14px; background: white; color: #888; font-weight: normal; font-size: 32px; border-radius: 50px;}
#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
#subscribe-box-blogttcn {width: 1000px; margin: auto; color: #666}
#subscribe-box-blogttcn p {color: #555; padding: 0; margin: 0 0 15px 0; font-size:40px;font-weight:700;font-family:"Roboto Condensed",sans-serif}
#subscribe-box-blogttcn a {color: #555; border: 2px solid #ddd; padding: 5px 0; display: block; margin: 20px 0 0 0; width: 200px; font-size: 20px; font-weight: 300;font-family:"Roboto",sans-serif}
#subscribe-box-blogttcn a:hover,#subscribe-box-blogttcn a:focus{color:#66689c;border:2px solid}
#subscribe-box-blogttcn span {font-family:"Roboto",sans-serif;font-weight:300;font-size:28px; padding: 0; margin: auto; line-height: 1.4}
@media screen and (max-width:768px){#subscribe-box-blogttcn{width:100%}}
</style>
<div id='bacsiwindows-popup-vt'>
<div id='boxclose'>
</div>
<div id='boxview'>
<div id='closebox'>
</div>
<div id='subscribe-box-blogttcn'>
<center><p>TUYỂN CỘNG TÁC VIÊN CHO BÁC SĨ WINDOWS</p>
<span>Chào các bạn, do mình không có nhiều thời gian để ra bài viết hằng ngày được nên mình sẽ tuyển thêm người viết bài cho blog.
<a href='http://www.bacsiwindows.com/p/tuyen-ctv.html'>XEM CHI TIẾT <i class='fa fa-angle-right'/></a></span></center>
</div></div></div>

Quăng hết đống nào vào trước </body>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(key,value,options){if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options);if(value===null||value===undefined){options.expires=-1;}
if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}
value=String(value);return(document.cookie=[encodeURIComponent(key),'=',options.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}
options=value||{};var result,decode=options.raw?function(s){return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;};
//]]>
</script>
<script type='text/javascript'>//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('1m(W(p,a,c,k,e,d){e=W(c){Y c};1b(!\'\'.1i(/^/,1l)){1c(c--){d[c]=k[c]||c}k=[W(e){Y d[e]}];e=W(){Y\'\\\\w+\'};c=1};1c(c--){1b(k[c]){p=p.1i(1n 1j(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c])}}Y p}(\'1x(26(24,27,21,23,22,25){22=26(21){X(21<27?\\\'\\\':22(2c(21/27)))+((21=21%27)>2b?1h.2a(21+29):21.2d(2e))};1e(!\\\'\\\'.1g(/^/,1h)){1f(21--){25[22(21)]=23[21]||22(21)}23=[26(22){X 25[22]}];22=26(){X\\\'\\\\\\\\1v+\\\'};21=1};1f(21--){1e(23[21]){24=24.1g(1u 1k(\\\'\\\\\\\\1a\\\'+22(21)+\\\'\\\\\\\\1a\\\',\\\'1r\\\'),23[21])}}X 24}(\\\'2g(28(24,27,21,23,22,25){22=28(21){Z 21};1d(!\\\\\\\'\\\\\\\'.1s(/^/,2f)){1t(21--){25[21]=23[21]||21}23=[28(22){Z 25[22]}];22=28(){Z\\\\\\\'\\\\\\\\\\\\\\\\1v+\\\\\\\'};21=1};1t(21--){1d(23[21]){24=24.1s(1Z 1Y(\\\\\\\'\\\\\\\\\\\\\\\\1a\\\\\\\'+22(21)+\\\\\\\'\\\\\\\\\\\\\\\\1a\\\\\\\',\\\\\\\'1r\\\\\\\'),23[21])}}Z 24}(\\\\\\\'7(1o).8(0($){1S($.5("6")!="9"){$("#3-2-4").1R(1Q).1T("1");$("#1U, #1X").1W(0(){$("#3-2-4").1V().2h("1")})}});\\\\\\\',1o,2i,\\\\\\\'28|2u|2t|2s|2v|2w|2y|2x|2r|2q|2l|1d|2k|1P|2m|2n|2p|2o|2z|1I\\\\\\\'.1z(\\\\\\\'|\\\\\\\'),0,{}))\\\',1w,1w,\\\'|||||||||||||||26||X|1e|1f||1g|10|15|1h||13|1x|14|16|18|1u||1k|11|19|1O|17|12|20|1K|1D|1N|1E|1F|1G|1p|1H|2A|1L|1J|1M|1C|1B|1A|1y|2j|2P\\\'.1p(\\\'|\\\'),0,{}))\',10,2S,\'|||||||||||||||||||||c|e|k|p|d|W|a|f||Y|b|h|1i|1b|||1l|i|1c|m|1n|1m|1j|j|g|1q|l|w|A|N|2J|D|2K|R|Q|U|y||V|T|P|2T|r|n|v|t|C|x|q|u|o|z|B|s|S|O|2U|2W|2V|2O|2B|2G|2H|2M|2I|2N|2L|2C|2D|2E|2F|I|J|E|F|H|G|M|L||2Q|2R|K\'.1q(\'|\'),0,{}))',62,183,'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||function|30|return|32|||||||||||31|if|while|38|34|39|33|37|replace|RegExp|43|String|eval|new|40|46|split|45|47|44|41|48|58|42|91|103|90|81|82|85|88|89|84|83|99|79|86|77|80|87|100|97|73|72|57|70|67|69|64|66|68|65|||||||||||53|35|51|62|36|71|63|74|52|101|96|76|95|94|93|92|75|56|54|50|49|55|61|59|60|98|78|bacsiwindows|closebox|boxclose|yes|popup_facebook_box|vt|delay|fadeOut|parseInt|fromCharCode|stop|1000|click|cookie|102|ready|jQuery|104|toString|popup|document|fadeIn'.split('|'),0,{}))
//]]></script>
<style>
#bacsiwindows-popup-vt {display: none; background: #FFF; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none}
#boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#boxview {width: 100%; position: absolute; top: 30%; left: 0; background:white; padding:25px 0}
#closebox {float: right; cursor: pointer; position: fixed; right: 20px; top: 25px}
#closebox:before {font-family: FontAwesome; content: "\f00d"; padding: 10px 14px; background: white; color: #888; font-weight: normal; font-size: 32px; border-radius: 50px;}
#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
#subscribe-box-blogttcn {width: 1000px; margin: auto; color: #666}
#subscribe-box-blogttcn p {color: #555; padding: 0; margin: 0 0 15px 0; font-size:40px;font-weight:700;font-family:"Roboto Condensed",sans-serif}
#subscribe-box-blogttcn a {color: #555; border: 2px solid #ddd; padding: 5px 0; display: block; margin: 20px 0 0 0; width: 200px; font-size: 20px; font-weight: 300;font-family:"Roboto",sans-serif}
#subscribe-box-blogttcn a:hover,#subscribe-box-blogttcn a:focus{color:#66689c;border:2px solid}
#subscribe-box-blogttcn span {font-family:"Roboto",sans-serif;font-weight:300;font-size:28px; padding: 0; margin: auto; line-height: 1.4}
@media screen and (max-width:768px){#subscribe-box-blogttcn{width:100%}}
</style>
<div id='bacsiwindows-popup-vt'>
<div id='boxclose'>
</div>
<div id='boxview'>
<div id='closebox'>
</div>
<div id='subscribe-box-blogttcn'>
<center><p>TUYỂN CỘNG TÁC VIÊN CHO BÁC SĨ WINDOWS</p>
<span>Chào các bạn, do mình không có nhiều thời gian để ra bài viết hằng ngày được nên mình sẽ tuyển thêm người viết bài cho blog.
<a href='http://www.bacsiwindows.com/p/tuyen-ctv.html'>XEM CHI TIẾT <i class='fa fa-angle-right'/></a></span></center>
</div></div></div>

Chia sẻ

Bài Liên Quan Tác Giả

Huỳnh Phụng Blogger

Tôi thích viết Blog để chia sẻ trãi nghiệm của chính mình. Tôi làm việc về Digital Marketing (SEO, Google Adwords, Facebook) và hy vọng sẽ có cơ hội hợp tác với bạn trong tương lai. Cùng chia sẻ kinh nghiệm mình có được