- Published on
How to make modal with pure Javascript + Tailwind CSS
- Authors
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 selectmodal-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
- Name
- Umur Köse