Internet Speed Test AI Prompt Library CSS Gradient Generator Meta Tag Generator Color Converter QR Code Generator

Modal & Dialog Snippet Generator

Creates responsive modals or popups with configurable triggers and animations.

1. HTML

<!-- The button to open the modal -->
<button id="openModalBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <h2>Modal Title</h2>
    <p>This is the modal content. You can put any HTML here.</p>
  </div>
</div>

2. CSS

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
  animation: fadeIn 0.3s;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
  position: relative;
  animation: slideIn 0.3s;
}

.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
  color: black;
}

@keyframes fadeIn {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes slideIn {
  from {top: -50px; opacity: 0}
  to {top: 0; opacity: 1}
}

3. JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const modal = document.getElementById("myModal");
    const btn = document.getElementById("openModalBtn");
    const span = document.getElementsByClassName("close-btn")[0];

    btn.onclick = () => { modal.style.display = "block"; }
    span.onclick = () => { modal.style.display = "none"; }

    window.onclick = (event) => {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    
    window.onkeydown = (event) => {
        if (event.key === "Escape" && modal.style.display === "block") {
             modal.style.display = "none";
        }
    }
});

Frequently Asked Questions

Related Web Tools

Tooltip & Popover Generator

Generates lightweight JS/CSS for tooltips.

Drag-and-Drop List Builder

Create sortable lists with a ready-to-use code snippet.

Mini Sparkline Chart Generator

Generate tiny inline SVG charts for dashboards.

Interactive Data Table Generator

Generate an HTML table with sorting, filtering, and pagination.

Countdown & Timer Widget Generator

Create countdown timers with custom labels and target dates to engage visitors instantly.

Clipboard Copy & Feedback Generator

Creates a ready-to-use JS snippet for copying text to clipboard with visual feedback.

More Web Tools

Screen Recorder

Record your screen with webcam overlay and microphone - free, no signup, no watermark. 100% private.

Chronological Age Calculator

Calculate precise age (Years, Months, Days) for standardized testing and assessment reports.

Whack-A-Mole

Play a classic game of Whack-A-Mole.

Flip a Coin

A simple, interactive tool to flip a virtual coin.

Decision Roulette

A fun, interactive wheel spinner to help you make random choices.

Viewport Scroll Spy Generator

Track scroll positions and highlight active sections on your web pages easily.

Emoji Picker Widget Generator

Add a customizable emoji picker to your web forms or chat applications instantly.

Free Online Courses with Certificates

Access premium courses from top universities and companies for free. Unlock logic via ad support.

Form Field Auto-Filler Generator

Automatically prefill your web forms using URL params or localStorage for testing and marketing.