Code tạo Popup với Html Css và JS

Code Giza Data Tháng hai 14, 2023

Dưới đây là ví dụ 1 dạng popup nội dung cơ bản với các chức năng tự hiển thị sau thời gian cài đặt, và tự tắt sau thời gian bao lâu chỉ với HTML, CSS và JS.

Các thông số có thể tuỳ biến trong phần này:

Sau bao nhiêu giây thì hiển thị nội dung Popup.
Popup sẽ hiển thị bao nhiêu lâu thì tự tắt.

Các đoạn code bao gồm.

CSS

#noidungpopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9999;
    color: black;
    text-align: center;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 4px;
}

#noidungpopup.show {
    opacity: 1;
}

#noidungpopup button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    margin: 10px;
}

#noidungpopup button:hover {
    background-color: #3e8e41;
}

#nensaupopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9998;
}

HTML

<div id="noidungpopup">
    <p>This is the popup content.</p>
    <button id="disable-popup">Disable</button>
</div>

<div id="nensaupopup"></div>

JS

// Check if the popup has been disabled
var popupDisabled = localStorage.getItem('popupDisabled');
if (popupDisabled === null || popupDisabled !== 'true') {
    // cài số giây tự mở popup - 1 giây tương ứng 1000
    setTimeout(showPopup, 5000);
}

// Show the popup
function showPopup() {
    var popup = document.getElementById('noidungpopup');
    popup.style.display = 'block';
    document.getElementById('nensaupopup').style.display = 'block';
    setTimeout(function() {
        popup.classList.add('show');
    }, 50);
    // cài số giây tự tắt popup - 1 giây tương ứng với 1000
    document.getElementById('disable-popup').addEventListener('click', disablePopup);
    setTimeout(hidePopup, 600000);
}

// Hide the popup
function hidePopup() {
    var popup = document.getElementById('noidungpopup');
    popup.classList.remove('show');
    setTimeout(function() {
        popup.style.display = 'none';
    }, 300);
    document.getElementById('nensaupopup').style.display = 'none';
}

// Disable the popup
function disablePopup() {
    localStorage.setItem('popupDisabled', 'true');
    hidePopup();
}

// Hide the popup when clicking outside of it
window.onclick = function(event) {
    if (event.target == document.getElementById('nensaupopup')) {
        hidePopup();
    }
};