Chia sẻ code popup thông báo giữa màn hình trang web

Chia sẻ với các bạn quả code thông báo này để gắn lên website của bạn sử dụng cho nhiều mục đích tùy ý bạn sử dụng, có thể chèn quảng cáo như mình.

Popup quảng cáo giữa màn hình website, blog, một loại popup được sử dụng khá phổ biến trong các site phim, website game.

Code sử dụng rất đơn giản.

Demo ảnh:

Hướng dẫn sử dụng

Bạn chỉ cần chèn code này vào đâu cũng được, trang mà bạn muốn hiển thị ví dụ header, body hay foooter đều được.

Đối với bloger

Để thêm popup này vào blog các bạn có thể chèn code dưới đây vào trước thẻ </body> hoặc tạo 1 tiện ích HTML/Javacript trong Bố cục blog.

Nhớ thay đổi banner của bạn nhé.

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
#popup-giua-man-hinh .headerContainer,#popup-giua-man-hinh .bodyContainer,#popup-giua-man-hinh .footerContainer{max-width:960px;margin:0 auto;background:#FFF}
#popup-giua-man-hinh .padding{padding:20px}
#popup-giua-man-hinh .bodyContainer{min-height:500px}
#popup-giua-man-hinh .popUpBannerBox{position:fixed;background:rgba(0,0,0,0.9);width:100%;height:100%;top:0;left:0;color:#FFF;z-index:999999;display:none}
#popup-giua-man-hinh .popUpBannerInner{max-width:300px;margin:0 auto}
#popup-giua-man-hinh .popUpBannerContent{position:fixed;top:150px}
#popup-giua-man-hinh .closeButton{color:red;text-decoration:none;font-size:18px}
#popup-giua-man-hinh a.closeButton{float:right}
</style>
<div id="popup-giua-man-hinh">
<div class="popUpBannerBox">
 <div class="popUpBannerInner">
  <div class="popUpBannerContent">
   <p><a href="#" class="closeButton">Close</a></p>

<!-- ==================== CODE HIỂN THỊ QUẢNG CÁO ====================-->

          <a href="http://www.share123.vn"><img src="https://4.bp.blogspot.com/-YSTc_ORG9jI/V_m5KA6vwhI/AAAAAAAAgCw/XTA1KBK1WacDrkeA9MywmaCWJWJZks-pwCLcB/s1600/ads-demo.gif"/></a>

<!-- ==================== END HIỂN THỊ QUẢNG CÁO ====================-->
  </div>
 </div>
</div>
<script type="text/javascript">
 function showPopUpBanner() {
  $('.popUpBannerBox').fadeIn("2000");
 }
 setTimeout(showPopUpBanner, 1000); //thời gian popup bắt đầu hiển thị

 $('.popUpBannerBox').click(function(e) {
  if ( !$(e.target).is('.popUpBannerContent, .popUpBannerContent *' ) ) {
   $('.popUpBannerBox').fadeOut("2000");
   return false;
  }
 });
 $('.closeButton').click(function() {
  $('.popUpBannerBox').fadeOut("2000");
  return false;
 });
</script>
</div>

Chúc bạn thành công.