Tạo popup thông báo khi vào trang

Chào mừng các bạn đến với Tôi Viết Code!
Cũng đã lâu rồi mình chưa viết bài, cũng tại không có ý tưởng nào hay ho cả, cũng tại mình chưa có ý tưởng viết. Hôm nay mình sẽ chia sẻ đến cho các bạn cách Tạo popup thông báo khi vào trang cho các bạn nhé. Bắt đầu nào!

Bước 1:

Thêm code bên dưới vào trong thẻ body
<div id='popup'>
<div class='popup'>
Chào mừng các bạn đến với <b>Tôi Viết Code</b>.
<span class='close' onclick='checkPopup()'>x</span>
</div>
</div>

Bước 2:

Thêm CSS vào thẻ style
#popup {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background: rgba(0,0,0,.7);
}
#popup.active {display: none}
#popup .popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 99999;
width: 300px;
padding: 30px;
background: #fff;
box-shadow: 0 3px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 3px 10px rgba(0,0,0,.2);
-webkit-box-shadow: 0 3px 10px rgba(0,0,0,.2);
color: #333;
font-size: 16px;
line-height: 1.7;
}
.popup a {
position: relative;
padding-bottom: 1px;
display: inline-block;
}
.popup a::after {content: ""; background: #337ab7; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0}
.popup .close {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
background: #000;
border-radius: 100px;
padding: 10px;
cursor: pointer;
text-decoration: none;
}

Bước 3:

Thêm Javascript vào trong thẻ head
<script tyle='text/javascript'>
//<![CDATA[
var _0x9b3b = ["statusPopup", "getItem", "active", "toggleClass", "#popup", "click", ".close", "ready", "setItem", "removeItem"];
$(document)[_0x9b3b[7]](function () {
    var _0x9523x1 = sessionStorage[_0x9b3b[1]](_0x9b3b[0]);
    if (_0x9523x1 == 1) {
        $(_0x9b3b[4])[_0x9b3b[3]](_0x9b3b[2])
    };
    if (_0x9523x1 != 1) {
        $(_0x9b3b[6])[_0x9b3b[5]](function () {
            $(_0x9b3b[4])[_0x9b3b[3]](_0x9b3b[2])
        })
    }
});

function checkPopup() {
    var _0x9523x1 = sessionStorage[_0x9b3b[1]](_0x9b3b[0]);
    if (_0x9523x1 == undefined) {
        sessionStorage[_0x9b3b[8]](_0x9b3b[0], 1)
    };
    if (_0x9523x1 == 1) {
        sessionStorage[_0x9b3b[9]](_0x9b3b[0]);
        $(_0x9b3b[4])[_0x9b3b[3]](_0x9b3b[2])
    }
}
//]]></script>

Lời kết

Các bạn có thể sử dụng thủ thuật trên để tạo thông báo mới cho member khi vào trang.
Chúc các bạn thành công!

13 nhận xét:

  1. Vào lần đầu nó hiện, lần sau nó k hiện nữa hay s a

    Trả lờiXóa
    Trả lời
    1. Vào các trang sau vẫn hiện nhé e, để phòng trường hợp member vào link khác trang chủ thì vẫn nhận đc thông báo

      Xóa
  2. Còn dư slot liên kết k a cho e đặt lk với

    Trả lờiXóa
  3. ý mất liên kết tui r nà :(
    #code5giay

    Trả lờiXóa
    Trả lời
    1. Chưa cập nhật thôi ông, tại đang edit temp tùm lum ấy

      Xóa
  4. Wow tuyệt quá bạn ơi, tìm mãi moiws thấy bài của bạn hãy quá

    Trả lờiXóa