Modal

A modal is a dialog that presents users with information, messages. A modal appears on top of the web app's content and must be manually dismissed before user can resume interacting with the app.

Demo

HTML

              
<div class="container modal" id="modal-container">
<div class="container-title">Modal Heading!</div>
<div class="container-content">Modal text description.</div>
<div class="container-footer">
<button class="btn btn-full-width" onclick="closeModal()">Dismiss</button>
</div></div>
              
            

JS

  
const showModal = () => document.getElementById("modal-container").style.display="unset";
const closeModal = () => document.getElementById("modal-container").style.display = "none";