Modals

Modals are positioned over everything else in the document and remove scroll from the page. Its closed only with close button on modal pop-up, or a click anywhere on the screen.

Examples

                   
<div id="modal" class="modal">
    <div class="modal-content bg-white">
        <div
            class="modal-header flex justify-between align-items-center bg-grey-800 text-white p-5">
            <h4 class="h4 text-lg">Modal Header</h4>
            <span onclick="closeModal()"
                class="modal-close text-rose-500 text-hover-rose-300">×</span>
        </div>
        <div class="modal-body p-5">
            <p>Some text in the Modal Body</p>
            <p>Some other text...</p>
            <p>Some text in the Modal Body</p>
            <p>Some other text...</p>
            <p>Some text in the Modal Body</p>
            <p>Some other text...</p>
            <p>Some text in the Modal Body</p>
        </div>
    </div>
</div>

<a id="modalBtn" onclick="openModal()" class="btn btn-link-sky">click me</a>
                   
                

                    
// Get the modal
var modal = document.getElementById("modal");

// Get the button that opens the modal
// var btn = document.getElementById("modalBtn");

// // Get the  element that closes the modal
// var span = document.querySelector("modal-close");

// When the user clicks the button, open the modal
function openModal() {
modal.style.display = "block";
}

// When the user clicks on  (x), close the modal
function closeModal() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
};