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

Chi tiết

Liên quan

Nhận xét

Tác giả

Bản Quyền

Xem toàn trang

Nếu muốn xem bài viết một kích thước lớn hãy click xem toàn trang nhé!

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!

Chia sẻ lên Facebook

Chia sẻ lên Zalo

Lưu ý:
Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/xvhDr24.png[/img]

Trịnh Công Sơn

“Đừng so sánh mình với bất cứ ai trong thế giới này. Nếu bạn làm như vậy có nghĩa bạn đang sỉ nhục chính bản thân mình.”

Tất cả bài đăng trên website đều thuộc bản quyền về Tôi Viết Code, chỉ được phát hành lại nội dung từ website này khi có sự đồng ý bằng văn bản của admin