Kumpulan JavaScript Blogger

Script Pop Up Overlay

<style> 

/* Popup Overlay */
.popup-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure the popup is on top */
} 

/* Popup Content */
.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
  max-width: 500px;
  text-align: center;
  position: relative;
} 

.popup-content h2 { 

  background-color: #fff; 

  padding: 20px; 

  border-radius: 5px; 

  width: 80%; 

  max-width: 500px; 

  text-align: center; 

  position: relative; 

  color: #333; 

} 

/* Close Button */
.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
} 

/* Action Button */
#popup-action-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
} 

#popup-action-button:hover {
  background-color: #0056b3;
}
</style> 

<!-- Popup Container -->
<div id="popup" class="popup-overlay">
  <div class="popup-content">
    <span class="popup-close">&times;</span>
    <h2>Welcome to Our Blog!</h2>
    <p>This is a popup message. You can include any content here, such as a special offer or a subscription form.</p>
    <button id="popup-action-button">Learn More</button>
  </div>
</div> 

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const popup = document.getElementById('popup');
    const closeButton = document.querySelector('.popup-close'); 

    // Function to show the popup
    function showPopup() {
      popup.style.display = 'flex'; // Show the popup
    } 

    // Function to hide the popup
    function hidePopup() {
      popup.style.display = 'none'; // Hide the popup
    } 

    // Show the popup after 3 seconds
    setTimeout(showPopup, 3000); 

    // Close the popup when the close button is clicked
    closeButton.addEventListener('click', hidePopup); 

    // Optionally, close the popup when clicking outside the content area
    popup.addEventListener('click', function(event) {
      if (event.target === popup) {
        hidePopup();
      }
    });
  });
</script>

1 2 3 4 5