How to create modal in html

HtmlHow-ToBeginner · 4 min read

How to Create a Modal in HTML: Simple Steps and Example

To create a modal in HTML, use a div element for the modal content and control its visibility with CSS and JavaScript. Typically, you add a button to open the modal and a close button inside it to hide the modal again.

📐

Syntax

A modal usually consists of a container <div> with a class or ID to style it. Inside, you place the modal content and a close button. You control showing or hiding the modal by toggling CSS styles like display or visibility.

<button>: triggers modal open
<div class="modal">: modal container
<span class="close">: close button inside modal

html

<button id="openModal">Open Modal</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close" tabindex="0">&times;</span>
    <p>Modal content goes here.</p>
  </div>
</div>

💻

Example

This example shows a button that opens a modal window with some text and a close button. The modal appears centered with a semi-transparent background.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Modal Example</title>
<style>
  body {font-family: Arial, sans-serif;}
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
  }
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 400px;
    border-radius: 8px;
  }
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
  }
</style>
</head>
<body>

<button id="openModal">Open Modal</button>

<div id="myModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
  <div class="modal-content">
    <span class="close" aria-label="Close modal" tabindex="0">&times;</span>
    <h2 id="modalTitle">Modal Title</h2>
    <p>This is a simple modal window.</p>
  </div>
</div>

<script>
  const modal = document.getElementById('myModal');
  const btn = document.getElementById('openModal');
  const span = modal.querySelector('.close');

  btn.onclick = () => {
    modal.style.display = 'block';
    span.focus();
  };

  span.onclick = () => {
    modal.style.display = 'none';
    btn.focus();
  };

  window.onclick = (event) => {
    if (event.target === modal) {
      modal.style.display = 'none';
      btn.focus();
    }
  };

  window.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && modal.style.display === 'block') {
      modal.style.display = 'none';
      btn.focus();
    }
  });
</script>

</body>
</html>

Output

A webpage with a button labeled 'Open Modal'. Clicking it shows a centered white box with a title, text, and a close (×) button on a dark transparent background. Clicking the close button or outside the box hides the modal.

⚠️

Common Pitfalls

Common mistakes when creating modals include:

Not hiding the modal initially with CSS display: none;, so it shows on page load.
Forgetting to add a close button or a way to close the modal, trapping users.
Not managing keyboard accessibility, like closing modal with Escape key.
Not using position: fixed; for the modal container, causing scrolling issues.

html

<!-- Wrong: modal visible on load -->
<div class="modal" style="display:block;">...</div>

<!-- Right: modal hidden on load -->
<div class="modal" style="display:none;">...</div>

📊

Quick Reference

Tips for creating modals:

Use display: none; to hide modal initially.
Use position: fixed; and full screen size for overlay.
Include a clear close button with accessible label.
Allow closing modal by clicking outside or pressing Escape.
Use ARIA roles like role="dialog" and aria-modal="true" for accessibility.

✅

Key Takeaways

Use a hidden div with CSS and JavaScript to create a modal popup.

Always include a close button and allow closing by clicking outside or pressing Escape.

Use position: fixed; and a semi-transparent background for the overlay effect.

Add ARIA roles and labels to make modals accessible to all users.

Test modal behavior on different screen sizes and with keyboard navigation.