Published on

6 Tips To Make A Modal ( JS Vanilla ) With Tailwind CSS

Tags
Modals
Modal ( JS Vanilla )

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to rapidly build custom user interfaces. It provides a set of pre-defined CSS classes that can be used to create any UI component. Tailwind CSS is highly customizable, and it allows developers to create unique designs without writing any custom CSS.

The description of Modal (JS Vanilla) UI component

A modal is a UI component that is used to display content on top of the current page. It is often used to display important information or to prompt the user to take a specific action. Modals are commonly used in web applications and can be implemented using JavaScript and CSS.

Why use Tailwind CSS to create a Modal (JS Vanilla) UI component?

Tailwind CSS provides a set of pre-defined CSS classes that can be used to create a modal quickly and easily. It eliminates the need to write custom CSS, which can be time-consuming and error-prone. Additionally, Tailwind CSS is highly customizable, which means that developers can easily modify the styles of the modal to match the design of their application.

The preview of Modal (JS Vanilla) UI component

To create a modal using Tailwind CSS, we will use a combination of HTML, CSS, and JavaScript. Here is a preview of what our modal will look like:

Free download of the Modal ( JS Vanilla )'s source code

The source code of Modal (JS Vanilla) UI component

Here is the source code for our modal:

<style>
    :root {
        --shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);
        --ring-offset-shadow:0 0 #0000;
        --ring-shadow:0 0 #0000;
    }

    .card_open {
        animation-duration: 2s;
        animation-name: card_open;
    }

    @keyframes card_open {
        from {
            height: 1%;
            box-shadow: var(--shadow);
        }

        to {
            height: 100%;
            box-shadow: var(--ring-offset-shadow,0 0 #0000),var(--ring-shadow,0 0 #0000),var(--shadow);
        }
    }
</style>

<button id="card_open" class="py-8 px-8 bg-green-400 hover:bg-green-300 border-gray-500 text-blue-50 hover:text-white rounded-md block">Open a modal</button>

    <div id="card_panel" class="main-modal fixed w-full inset-0 z-50 overflow-hidden flex justify-center items-center hidden">
        <div class="modal-container bg-white w-4/12 md:max-w-11/12 mx-auto rounded-xl z-50 overflow-y-auto">
            <div class="modal-content py-4 text-left px-6">
                <div class="flex justify-between items-center pb-3">
                    <p class="text-2xl font-bold text-gray-500">Header</p>
                    <div id="card_close" class="modal-close cursor-pointer z-50">
                        <svg class="fill-current text-gray-500" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                            <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                        </svg>
                    </div>
                </div>
                <div class="my-5 mr-5 ml-5 flex justify-center">
                    <p>Body</p>
                </div>
                <div class="flex justify-end pt-2 space-x-14">
                    <p>Footer</p>
                </div>
            </div>
        </div>
    </div>

<script>
    const card_open = document.getElementById('card_open')
    const card_close = document.getElementById('card_close')
    const card_panel = document.getElementById('card_panel')

    function modalState() {
        if(card_panel.classList.contains('hidden')) {
            // Show modal
            card_panel.classList.remove('hidden')
            card_panel.classList.add('block')

            // Delete button
            card_open.classList.add('hidden')
            card_open.classList.remove('block')

            // Start animation open
            card_panel.classList.add('card_open')
        } else {
            // Delete modal
            card_panel.classList.add('hidden')
            card_panel.classList.remove('block')

            // Show button
            card_open.classList.remove('hidden')
            card_open.classList.add('block')

            // Remove animation open
            card_panel.classList.remove('card_open')
        }
    }

    card_open.addEventListener('click', modalState)
    card_close.addEventListener('click', modalState)
</script>

How to create a Modal (JS Vanilla) with Tailwind CSS?

To create a modal with Tailwind CSS, follow these six tips:

1. Create the HTML structure

The first step in creating a modal is to create the HTML structure. The modal should be a separate element that is added to the page when it is needed. Here is an example of the HTML structure for our modal:

<div class="modal fixed w-full h-full top-0 left-0 flex items-center justify-center">
  <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>

  <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">

    <div class="modal-content py-4 text-left px-6">
      <div class="modal-header text-xl font-semibold border-b pb-3">
        Modal Header
      </div>
      <div class="modal-body">
        Modal Body
      </div>
      <div class="modal-footer border-t pt-3">
        Modal Footer
      </div>
    </div>
  </div>
</div>

2. Add Tailwind CSS classes

Once you have created the HTML structure, you can start adding Tailwind CSS classes to style the modal. In the example above, we have used several Tailwind CSS classes to style the modal, including fixed, w-full, h-full, top-0, left-0, flex, items-center, justify-center, bg-gray-900, opacity-50, w-11/12, md:max-w-md, mx-auto, rounded, shadow-lg, z-50, overflow-y-auto, py-4, text-left, px-6, text-xl, font-semibold, border-b, pb-3, border-t, and pt-3.

3. Hide the modal by default

Next, you should hide the modal by default. You can do this by adding the hidden class to the modal container. This will ensure that the modal is not visible when the page loads.

4. Add JavaScript to show and hide the modal

To show and hide the modal, you will need to add some JavaScript code. Here is an example of how you can show and hide the modal using JavaScript:

const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')

openModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = document.querySelector(button.dataset.modalTarget)
    openModal(modal)
  })
})

overlay.addEventListener('click', () => {
  const modals = document.querySelectorAll('.modal.active')
  modals.forEach(modal => {
    closeModal(modal)
  })
})

closeModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = button.closest('.modal')
    closeModal(modal)
  })
})

function openModal(modal) {
  if (modal == null) return
  modal.classList.add('active')
  overlay.classList.add('active')
}

function closeModal(modal) {
  if (modal == null) return
  modal.classList.remove('active')
  overlay.classList.remove('active')
}

5. Add data attributes to the HTML

To make the JavaScript code work, you will need to add some data attributes to the HTML. Here is an example of how you can add data attributes to the HTML:

<button data-modal-target="#modal">Open Modal</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <button data-close-button class="close-button">&times;</button>
    <h2>Modal Header</h2>
    <p>Modal Body</p>
    <button data-close-button>Close Modal</button>
  </div>
</div>

<div id="overlay"></div>

6. Customize the styles

Finally, you can customize the styles of the modal to match the design of your application. You can modify the colors, fonts, and sizes of the modal by adding custom CSS to your application.

Conclusion

In this article, we have discussed how to create a modal using Tailwind CSS and JavaScript. We have provided six tips that you can follow to create a modal quickly and easily. By using Tailwind CSS, you can create a unique and customizable modal without writing any custom CSS.