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!

N

10

Chia sẻ

• Nhận liên kết

Trịnh Công Sơn

Cuộc sống đôi lúc không như chúng ta mong muốn nhưng đừng buồn, đừng suy nghĩ nhiều quá mà hãy tiếp tục đứng lên và chiến đấu tiếp vì tương lai của chính mình nhé!