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

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.

Form Field Auto-Filler Generator

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

CSS Shape & Clip-Path Generator

Create custom CSS shapes and clip-paths visually for modern web designs.

Dynamic Theme Generator

Create and preview dynamic CSS themes with variables for light, dark, or custom color schemes.