Published on

Beginners Guide: Create A Modal With JavaScript With Tailwind CSS

Tags
ModalsWidget
Modal with JavaScript

As a FrontEnd technology blogger, it is important to keep up with the latest trends and tools in the industry. In this article, we will explore how to create a Modal with JavaScript using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to style your HTML elements. It is designed to help you quickly build custom user interfaces without having to write custom CSS. With Tailwind CSS, you can easily create responsive designs, typography, and more.

The description of Modal with JavaScript ui component

A Modal is a user interface component that displays content on top of the current page. It is commonly used to display additional information, forms, or alerts. Modals are typically triggered by a button or link and can be closed by clicking a close button or by clicking outside the modal.

Why use Tailwind CSS to create a Modal with JavaScript ui component?

Tailwind CSS makes it easy to create a Modal with JavaScript by providing pre-defined classes for styling. This means that you don't have to write custom CSS to style your Modal. Additionally, Tailwind CSS is responsive, which means that your Modal will look great on all devices.

The preview of Modal with JavaScript ui component

To create a Modal with JavaScript using Tailwind CSS, we will need to use some HTML, CSS, and JavaScript code. Here is a preview of what our Modal will look like:

Free download of the Modal with JavaScript's source code

The source code of Modal with JavaScript ui component

To create a Modal with JavaScript using Tailwind CSS, we will need to use some HTML, CSS, and JavaScript code. Here is the source code for our Modal:

<style>
.modal-bg {
  background-color: rgba(0,0,0,0.5);
  z-index: -9999;
}
</style>

<button id="openBtn">Open Modal</button>

<div id="modal" class="modal-bg transition-opacity duration-500 opacity-0 pt-16 fixed w-full h-full left-0 z-10 overflow-auto">
  <div class="modal-content relative m-auto bg-gray-100 w-4/5 shadow-lg">
    <div class="p-4 bg-gray-700 text-white">
      <span class="closeBtn float-right text-lg font-bold hover:text-gray-500 no-underline cursor-pointer">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="p-4">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="p-4 text-white bg-gray-500">
      <h3>Modal Footer</h3>
    </div>
  </div>
</div>

<script>
var modal = document.querySelector("#modal");
var openBtn = document.querySelector("#openBtn");
var closeBtn = document.querySelector(".closeBtn");

openBtn.onclick = function() {
  modal.classList.add('opacity-100');
  modal.classList.add('z-50');
}

closeBtn.onclick = function() {
  modal.classList.remove('opacity-100');
  modal.classList.remove('z-50');
}

window.onclick = function(event) {
  if (event.target == modal) {
  	modal.classList.remove('opacity-100');
  	modal.classList.remove('z-50');
  }
}
</script>

How to create a Modal with JavaScript with Tailwind CSS?

Now that we have a preview and source code for our Modal, let's walk through the steps to create it.

Step 1: Create the HTML Markup

The first step is to create the HTML markup for our Modal. We will need to create a button or link that will trigger the Modal, and a div element that will contain the Modal content. Here is the HTML code:

<!-- Button or link to trigger the Modal -->
<button id="modal-btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Open Modal
</button>

<!-- Modal container -->
<div id="modal" class="fixed z-10 inset-0 overflow-y-auto hidden">
  <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    <div class="fixed inset-0 transition-opacity">
      <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>

    <!-- Modal content -->
    <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
      <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
        <div class="sm:flex sm:items-start">
          <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
            <!-- Icon -->
          </div>
          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <h3 class="text-lg leading-6 font-medium text-gray-900">Modal Title</h3>
            <div class="mt-2">
              <p class="text-sm leading-5 text-gray-500">
                Modal Content
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
        <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
          <button id="modal-close" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-blue-500 text-base leading-6 font-medium text-white shadow-sm hover:bg-blue-400 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
            Close
          </button>
        </span>
      </div>
    </div>
  </div>
</div>

In this code, we have created a button with the id "modal-btn" that will trigger the Modal. We have also created a div element with the id "modal" that will contain the Modal content. The Modal content is wrapped in a div element with the class "inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full". This class is provided by Tailwind CSS and will style the Modal.

Step 2: Add the JavaScript Code

The next step is to add the JavaScript code that will handle the Modal. We will need to add event listeners to the button and close button to show and hide the Modal. Here is the JavaScript code:

// Get the Modal element
const modal = document.getElementById('modal');

// Get the button that opens the Modal
const modalBtn = document.getElementById('modal-btn');

// Get the close button
const closeBtn = document.getElementById('modal-close');

// When the user clicks on the button, open the Modal
modalBtn.addEventListener('click', () => {
  modal.classList.remove('hidden');
});

// When the user clicks on the close button, close the Modal
closeBtn.addEventListener('click', () => {
  modal.classList.add('hidden');
});

// When the user clicks outside the Modal, close it
window.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.classList.add('hidden');
  }
});

In this code, we have added event listeners to the button and close button to show and hide the Modal. We have also added an event listener to the window object to close the Modal if the user clicks outside of it.

Step 3: Style the Modal with Tailwind CSS

The final step is to style the Modal with Tailwind CSS. We can do this by adding classes to the HTML elements in our Modal. Here is the CSS code:

/* Hide the Modal by default */
#modal {
  display: none;
}

/* Style the Modal container */
#modal .bg-gray-500 {
  opacity: 0.75;
}

/* Style the Modal content */
#modal .bg-white {
  border-radius: 0.5rem;
}

/* Style the Modal title */
#modal h3 {
  font-size: 1.5rem;
}

/* Style the Modal close button */
#modal #modal-close {
  border-color: transparent;
}

In this code, we have added classes to style the Modal container, content, title, and close button. We have also hidden the Modal by default using the "display: none;" property.

Conclusion

In this article, we have explored how to create a Modal with JavaScript using Tailwind CSS. We have covered the benefits of using Tailwind CSS, provided a preview and source code for our Modal, and walked through the steps to create it. With this knowledge, you can easily create custom Modals for your web applications.