DEV Community

Andy Peters
Andy Peters

Posted on • Edited on

13 2

Creating a modal dialog in Tailwind CSS and Alpine.js

Recently I converted an application I'm working on from a Bootstrap 4 theme to Tailwind CSS and Alpine.js. During that process, it was not immediately obvious (to me) on how to open a full screen modal window dialog clicking of a button; and close it again. At the time I didn't get far searching Google, Dev.to or GitHub. After figuring it out, I thought it warranted a short write up. I'm assuming you are all setup with TailwindCSS or AlpineJS; here we go...

Versions: At the time of this article, this was all done using Tailwind CSS 1.2 and Alpine.js 2.2.0

Reminder, it is not TailwindCSS's responsibility to provide a way to create a modal window. Tailwind is the CSS framework. Alpine.js is just commonly referenced in the Tailwind community in creating a modal, dropdowns, as well as other interactions.

Alpine.js didn't give me much to start with in the README.md. For example currently it only shows a dropdown: AlpineJS Use dropdown/modal

I needed these things to get everything work:

  1. Enclosing <div> with x-data="{ open: false }" tag. This <div> will enclose the next few tags.
  2. <button> with the x-show="open" tag. The button can be styled however you want of course.
  3. Dialog <div> with x-show="open" tag. I also styled this <div> for the darker background when the modal was displayed: style="background-color: rgba(0,0,0,.5);". I couldn't get another class or another <div> inside to do this. 🤷
    • Maybe you want this?: On your dialog <div> add @click.away="open = false" so when your user clicks off screen it'll go away.
  4. Enclosed in the <div> dialog, you'll need a <button> tag with @click="open = false", to ensure it'll close the modal when clicked.
  5. BONUS: Animations. Some excellent animations to really make the opening and closing of your modal pop.

Alt Text

Copy / paste-able example:

I have all of this inside the main container of the app layout.

    <!-- modal div -->
    <div class="mt-6" x-data="{ open: false }">

      <!-- Button (blue), duh! -->
      <button class="px-4 py-2 text-white bg-blue-500 rounded select-none no-outline focus:shadow-outline" @click="open = true">Open Modal</button>

      <!-- Dialog (full screen) -->
      <div class="absolute top-0 left-0 flex items-center justify-center w-full h-full" style="background-color: rgba(0,0,0,.5);" x-show="open"  >

        <!-- A basic modal dialog with title, body and one button to close -->
        <div class="h-auto p-4 mx-2 text-left bg-white rounded shadow-xl md:max-w-xl md:p-6 lg:p-8 md:mx-0" @click.away="open = false">
          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <h3 class="text-lg font-medium leading-6 text-gray-900">
              Modal Title
            </h3>

            <div class="mt-2">
              <p class="text-sm leading-5 text-gray-500">
                Adipisci quasi doloribus. Veniam veritatis dignissimos. Quis maiores ea. Et nulla sunt.
              </p>
          </div>
        </div>

          <!-- One big close button.  --->
          <div class="mt-5 sm:mt-6">
            <span class="flex w-full rounded-md shadow-sm">
              <button @click="open = false" class="inline-flex justify-center w-full px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700">
                Close this modal!
              </button>
            </span>
          </div>

        </div>
      </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (1)

Collapse
 
akamal profile image
Ahmed Kamal • Edited

You can use this "bg-black bg-opacity-50 ..." instead of the inline style style="background-color: rgba(0,0,0,.5);" in Tailwind CSS v1.9.6

and thank you for this post, it was helpful