Scrolling Text Generator

Modal/Popup Generator

Create customizable modals and popups with delay, exit-intent, or click triggers. Add images, buttons, and beautiful overlay effects.

Preview
Click "Show Modal" to preview
Generated Code
<style>
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}
.modal-overlay.active { display: flex; }
.modal-box {
  background: #ffffff;
  border-radius: 12px;
  width: 480px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  font-family: system-ui, sans-serif;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #1a1a2e;
  opacity: 0.5;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.modal-close:hover { opacity: 1; background: #1a1a2e10; }
.modal-img { width: 100%; border-radius: 12px 12px 0 0; display: block; }
.modal-body { padding: 28px; }
.modal-title {
  font-size: 21px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 12px;
}
.modal-text {
  font-size: 15px;
  color: #1a1a2e;
  opacity: 0.75;
  line-height: 1.6;
  margin: 0 0 20px;
}
.modal-btn {
  display: inline-block;
  padding: 12px 28px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.modal-btn:hover { opacity: 0.9; }
</style>

<div class="modal-overlay" id="popupModal">
  <div class="modal-box">
    <button class="modal-close" id="modalClose">&times;</button>
    <div class="modal-body">
      <h2 class="modal-title">Special Offer!</h2>
      <p class="modal-text">Sign up today and get 20% off your first order. Don't miss out on this limited-time deal!</p>
      <a href="#" class="modal-btn">Claim Offer</a>
    </div>
  </div>
</div>

<script>
(function() {
  var modal = document.getElementById("popupModal");
  document.getElementById("modalClose").addEventListener("click", function() { modal.classList.remove("active"); });
  modal.addEventListener("click", function(e) { if (e.target === modal) modal.classList.remove("active"); });
  setTimeout(function() { document.getElementById("popupModal").classList.add("active"); }, 3000);
})();
</script>

Content

Trigger

Styling