jquery- Hiển thị hộp thoại 1 lần tự động căn giữa màn hình

Đây là bài kết hợp 2 thủ thuật hiển thị thông báo 1 lần dựa vào cookie và bài tự động căn đối tượng giữa màn hình.

<script src="http://code.jquery.com/jquery-1.7.1.js"  type='text/javascript'></script>
<script type='text/javascript'>function resizePopup() {$("#popuplayer1").css({height:$(window).height(),width:$(window).width() });}$(function() { resizePopup(); });$(window).resize(function() { resizePopup(); }); </script>
 <style>
a{text-decoration:none;}
#edit-with-js-bin{display:none}
#popuplayer0{position: fixed;left:0px;top:0px;}
#popuplayer1 {display: table-cell;vertical-align: middle;text-align:center;background:#ccc;opacity:0.8;}
#popupcontent {width:455px;padding: 10px;display:inline-block;box-shadow: 0px 0px 50px 5px;background:#A6CDA4;}
</style>
<div id="popup">
  <script type='text/javascript'>
    //<![CDATA[
    var content = '<a href="#"> Tôi đã học tương đối xong HTML CSS Javascript trên W3C!</a><br/><a href="#"> Tôi chưa, không học tại W3C!</a>';
    if (document.cookie.indexOf("cookie-notex") == -1 )
    {
      var ducumentwrite = '';
      ducumentwrite += '<div id="popuplayer0"><div id="popuplayer1"><div id="popupcontent">' + content + '</div></div></div>';
      document.getElementById('popup').innerHTML = ducumentwrite;
      document.cookie = "cookie-note"
    };
    //]] >
  </script>
</div>

Chú ý khi bạn dùng chính thức thì sửa cookie-notex thành cookie-note, ở trên mình cố tình để lệch cookie như thế để thử demo luôn hiển thị.

bendoi.vn