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

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: &quot;\f00d&quot;; 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>



ĐẤY LÀ DEMO

Đây là demo, bấm bất cứ vị trí nào trên màn hình để tắt.
HAY VL
- - 0 bình luận - lượt xem
https://pro.bacsiwindows.com/2018/01/tao-thong-bao-noi-giua-man-hinh-voi.html

BÌNH LUẬN (0)

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé