Chia sẻ code tạo popup chỉ hiện 1 lần cho blog/website

Cập nhật ngày 29/07/2025 Bởi Legend Phim

Demo Ảnh

<style>
/*<![CDATA[*/
#overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);align-items:center;justify-content:center;z-index:999}
#popup{background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.3);position:relative;z-index:2;animation:fadeIn 0.5s ease-out}
#closeBtn{position:absolute;top:10px;right:10px;cursor:pointer;font-size:30px;color:#555;background-color:#eee;border:none;padding:0px 10px;border-radius:50%;transition:background-color 0.3s;z-index:999;height:38px;line-height:33px;}
#closeBtn:hover{background-color:#ddd}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
#popup img{max-width:100%;height:auto;display:block;margin:0 auto}
/*]]>*/
</style>
<div id="overlay">
  <div id="popup">
    <span id="closeBtn" onclick="closePopup()">×</span>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGmCeSJlPce8FzKYit1Kli33-ghfkOFZIJ9E2vZ_7VCXqivgMxCsd8qNG3q44l9MyLpHjwSe2A3FgUFbetsJ7EmqhTKnvNKYWaXag1bbZB7fcZLgtYM4HSnQb76a18j8oIYkOlw6-jLChdknK4Rnk7sXHEaOVEK-FHDBKJtEwEE9czSS_Xr5ktvmF6eyX5/s16000/pop.jpg" alt="Popup Image"/>
  </div>
</div>
<script>
  //<![CDATA[
  document.addEventListener("DOMContentLoaded", function() {
    if (!sessionStorage.getItem("popupShown")) {
      document.getElementById("overlay").style.display = "flex";
    }
  });
  function closePopup() {
    document.getElementById("overlay").style.display = "none";
    sessionStorage.setItem("popupShown", "true");
  }
  //]]>
</script>

2. Code Popup dùng Form

<style>
/*<![CDATA[*/
#overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);align-items:center;justify-content:center;z-index:999}
#popup{background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.3);position:relative;z-index:2;animation:fadeIn 0.5s ease-out;max-width:400px;margin:0 auto}
#closeBtn{position:absolute;top:10px;right:10px;cursor:pointer;font-size:30px;color:#555;background-color:#eee;border:none;padding:0 10px;border-radius:50%;transition:background-color 0.3s;z-index:999;height:38px;line-height:33px}
#closeBtn:hover{background-color:#ddd}
#popup form{text-align:left}
#popup form label{display:block;margin-bottom:10px;font-weight:bold}
#popup form input,#popup form textarea{width:100%;padding:10px;margin-bottom:15px;box-sizing:border-box;border:1px solid #ccc;border-radius:5px;transition:border-color 0.3s}
#popup form input:focus,#popup form textarea:focus{border-color:#007bff}
#popup form textarea{resize:vertical}
#popup input[type="submit"]{background-color:#007bff;color:#fff;border:none;padding:12px 20px;border-radius:5px;cursor:pointer;transition:background-color 0.3s}
#popup input[type="submit"]:hover{background-color:#0056b3}
#successMessage{display:none;color:green;margin-top:10px}
.title-form{display:block;text-align:center;font-size:24px;color:#007bff;margin-bottom:20px}
/*]]>*/
</style>
<div id="overlay">
  <div id="popup">
    <span class="title-form">Tư vấn miễn phí</span>
    <form id="popupForm" action="/" method="post" onsubmit="return handleSubmit()">
      <span id="closeBtn" onclick="closePopup()">×</span>
      <label for="name">Tên:</label>
      <input type="text" id="name" name="entry.1111111111" required='' />
      <label for="phone">Điện thoại:</label>
      <input type="tel" id="phone" name="entry.222222222" required='' />
      <label for="content">Nội dung:</label>
      <textarea id="content" name="entry.333333333" rows="4" required=''></textarea>
      <input type="submit" value="Gửi thông tin"/>
      <div id="successMessage">Thông tin đã được gửi!</div>
    </form>
  </div>
</div>
<script>
  //<![CDATA[
  document.addEventListener("DOMContentLoaded", function() {
    if (!sessionStorage.getItem("popupShown")) {
      document.getElementById("overlay").style.display = "flex";
    }
  });

  function closePopup() {
    document.getElementById("overlay").style.display = "none";
    sessionStorage.setItem("popupShown", "true");
  }

  function handleSubmit() {
    document.getElementById("successMessage").style.display = "block";
    setTimeout(function() {
      document.getElementById("popupForm").reset();
      document.getElementById("successMessage").style.display = "none";
    }, 3000);
    return false;
  }
  //]]>
</script>

Chia sẻ code tạo popup chỉ hiện 1 lần cho blog/website

Chia sẻ code tạo popup chỉ hiện 1 lần cho blog/website

Comments

Post a Comment

Liên quan