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!