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

Cập nhật ngày 03/02/2024 Bởi Legend Phim

Share code tạo popup chỉ hiện 1 lần đầu khi truy cập, chỉ hiện lại khi bạn thoát và truy cập lại trang web đó. Code popup thông báo xuất hiện chỉ 1 lần khi vào trang blogspot. Hướng tạo popup thông báo,banner quảng cáo xuất hiện chỉ 1 lần khi vào trang web Blogger.

Cách hoạt động của code như này: Lần đầu truy cập nó sẽ check sessionStorage nếu chưa có thì hiện popup, nếu có thì ẩn popup. Khi thoát trang nó sẽ xóa sessionStorage để lần sau quay lại nó lại tiếp tục như ban đầu.

Cách cài copy toàn bộ code dán dưới thẻ mở <body> hoặc trước thẻ đóng </body> và lưu lại à xong. Nếu thấy popup to quá thì cho ảnh nhỏ lại

1. Code Popup dùng ảnh

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