How to make modal with pure Javascript + Tailwind CSS

In this article, we will create responsive modal with JavaScript + Tailwind CSS.

How to make

Let's create modal, modal launch button, classes and id's. modal will be open when we click modal-button. The modal will be close when we click modal-close classes. Here is the code:

<button id="modal-button">Open Modal</button> <!-- Open Modal -->

    <div id="modal"> <!--Modal Dialog -->
    <div> <!--Modal Content -->
            <div> <!--Modal Header -->
            <h3>Modal Header</h3>
            <span class="modal-close">×</span> <!-- Close Modal -->
        </div>
        <div> <!--Modal Body -->
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Nam excepturi repellendus amet, alias quia tenetur aut, perspiciatis assumenda deserunt iusto
                incidunt.</p>
        </div>
        <div> <!--Modal Footer -->
            <div>
                <button>Accept</button>
                <button class="modal-close">Decline</button> <!-- Close Modal -->
            </div>
        </div>
    </div>
</div>

Tailwind CSS

Note: You should write hidden class on id="modal". Modal must be hidden at default. We will add flex css and align center modal content when modal is shown. Here is the code and preview:

<button id="modal-button" class="text-sm text-white bg-blue-500 rounded-md px-4 py-2">Open Modal</button> <!--Open Modal -->

<div id="modal" class="hidden items-center justify-center h-screen w-screen fixed top-0 bg-black/50"> <!--Modal Dialog -->
    <div class="bg-white max-w-xl w-full rounded-md"> <!--Modal Content -->
            <div class="p-3 flex items-center justify-between border-b border-b-gray-300"> <!--Modal Header -->
            <h3 class="font-semibold text-xl">Modal Header</h3>
            <span class="modal-close cursor-pointer">×</span> <!-- Close Modal -->
        </div>
        <div class="p-3 border-b border-b-gray-300"> <!--Modal Body -->
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Nam excepturi repellendus amet, alias quia tenetur aut, perspiciatis assumenda deserunt iusto
                incidunt.</p>
        </div>
        <div class="p-3 flex items-center justify-start"> <!--Modal Footer -->
            <div>
                <button class="text-sm text-white bg-blue-500 rounded-md px-4 py-2">Accept</button>
                <button class="modal-close text-sm text-gray-400 border rounded-md px-4 py-2">Decline</button> <!-- Close Modal -->
            </div>
        </div>
    </div>
</div>

Javascript

Lets make our modal alive. First of all, we gonna select our id's with using const Note: We gonna disable scroll on body tag when modal is shown.

const x = document.getElementsByTagName('BODY')[0] // Select body tag because of disable scroll when modal is active
const modal = document.getElementById('modal') // modal
const modalBtn = document.getElementById('modal-button') // launch modal button
const modalClose = document.getElementsByClassName('modal-close') // close modal button

Open modal and disable scroll when click modalBtn / (id="modal-button").

// Open modal
modalBtn.onclick = function () {
        modal.style.display = "flex"; // Show modal
        x.style.overflow = "hidden"; //Disable scroll on body
}

There are two modal-close classes in our HTML. We must select two of them.

Use for and select modal-close classes.
Hide modal
Active scroll on body

Note: This function is close the modal. At this point, body must be scrollable.

// Select and trigger all close buttons
for (var i = 0; i < modalClose.length; i++) {
    modalClose[i].addEventListener('click', function () {
        modal.style.display = "none"; // Hide modal
        x.style.overflow = "auto"; // Active scroll on body
    })
}

The last function is close modal when click away (outside of modal content). We use event.target to select modal.

Note: This function is close the modal. At this point, body must be scrollable.

// Close modal when click away from modal
window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none"; // Hide modal
        x.style.overflow = "auto"; // Active scroll on body
    }
}

Result: CodePen