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

Tôi Viết Code Blogger đã đăng
Hiện có 10 bình luận
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!

10 nhận xét: