No Script Modal Window

Category: CSS & CSS3 , Modal & Popup | September 4, 2021
0 Comment
Demo Download
Author:natclark
Views Total:91 views
Official Page:Go to website
Last Update:September 4, 2021
License:MIT

Preview:

No Script Modal Window

Description:

A JavaScript-free modal window built using CSS and HTML <detail> element.

How to use it:

1. Load the modal.css in the document.

<link rel="stylesheet" href="modal.css" />

2. Create a modal window from an HTML <detail> element.

<details class="modal">
  <summary class="modal__toggle"></summary>
  <div class="modal__background">
    <div class="modal__body" tabindex="-1" role="dialog" aria-labelledby="modal__label" aria-live="assertive" aria-modal="true">
      <p id="modal__label">Modal Content</p>
    </div>
  </div>
</details>

See Also:

You Might Be Interested In:

Leave a Reply