Use Tailwind’s Alpine JavaScript modal to add dialogs to your site for lightboxes, user notifications, or completely custom content..
Below is a static modal example (meaning its position and display have been overridden).
Included are the modal header, modal body (required for padding), and modal
footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide
another explicit dismiss action.
<div class="flex flex-col w-full bg-white border rounded-lg shadow-lg outline-none focus:outline-none">
<div class="flex p-4 border-b border-gray-200 border-solid rounded-t">
<h5 class="mx-0 text-xl font-medium">Modal title</h5>
<button type="button" class="px-6 py-2 m-1 ml-auto -mt-2 -mb-2 -mr-2 text-lg font-semibold text-center text-black bg-transparent rounded b-0" @click="open = ! open" x-on:click="scrollenable()">X</button>
</div>
<div class="flex-auto p-4">...</div>
<div class="flex flex-wrap justify-end p-2 border-t border-gray-200 border-solid">
<button type="button" class="inline-block px-6 py-2 m-1 text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700" @click="open = ! open" x-on:click="scrollenable()">Close</button>
<button type="button" class="inline-block px-6 py-2 m-1 text-center text-white transition-all duration-500 ease-in-out bg-blue-500 border border-blue-500 rounded shadow-md text-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600">Save changes</button>
</div>
</div>
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
<div x-data="{ open: false}">
<button @click="open = ! open" x-on:click="scrolldisable()" class="mb-1 px-6 py-2 cursor-pointer text-white transition-all duration-500 ease-in-out bg-blue-500 border border-blue-500 rounded shadow-md hover:shadow-xl hover:bg-blue-600 hover:text-white">Launch demo modal</button>
<div class="fixed w-full h-full top-0 z-50" x-show="open" style="display: none;">
<span x-on:click="scrollenable()" class="fixed bg-gray-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
<!-- Mobile navbar -->
<nav class="fixed inset-x-0 w-auto max-w-lg mx-auto my-6 z-40" x-show="open" @click.away="open=false" x-transition:enter="transform transition-transform duration-700" x-transition:enter-start="-translate-y-full" x-transition:enter-end="-translate-y-0" x-transition:leave="transform transition-transform duration-700" x-transition:leave-start="-translate-y-0" x-transition:leave-end="-translate-y-full" style="display: none;">
<div x-show="open" x-transition:enter="transform transition-transform duration-700" x-transition:enter-start="-translate-y-full" x-transition:enter-end="-translate-y-0" x-transition:leave="transform transition-transform duration-700" x-transition:leave-start="-translate-y-0" x-transition:leave-end="-translate-y-full" class="" style="display: none;">
<div class="flex flex-col w-full bg-white border rounded-lg shadow-lg outline-none focus:outline-none">
<div class="flex p-4 border-b border-gray-200 border-solid rounded-t">
<h5 class="mx-0 text-xl font-medium">Modal title</h5>
<button type="button" class="px-6 py-2 m-1 ml-auto -mt-2 -mb-2 -mr-2 text-lg font-semibold text-center text-black bg-transparent rounded b-0" @click="open = ! open" x-on:click="scrollenable()">X</button>
</div>
<div class="flex-auto p-4">...</div>
<div class="flex flex-wrap justify-end p-2 border-t border-gray-200 border-solid">
<button type="button" class="inline-block px-6 py-2 m-1 text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700" @click="open = ! open" x-on:click="scrollenable()">Close</button>
<button type="button" class="inline-block px-6 py-2 m-1 text-center text-white transition-all duration-500 ease-in-out bg-blue-500 border border-blue-500 rounded shadow-md text-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600">Save changes</button>
</div>
</div>
</div>
</nav>
</div>
</div>
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
<div x-data="{ open: false}">
<button @click="open = ! open" x-on:click="scrolldisable()" class="mb-1 px-6 py-2 cursor-pointer text-white transition-all duration-500 ease-in-out bg-blue-500 border border-blue-500 rounded shadow-md hover:shadow-xl hover:bg-blue-600 hover:text-white">Launch static backdrop modal</button>
<div x-show="open" class="fixed inset-0 z-50 overflow-x-hidden overflow-y-auto outline-none focus:outline-none" x-transition:enter="transform transition-transform duration-700" x-transition:enter-start="-translate-y-full" x-transition:enter-end="-translate-y-0" x-transition:leave="transform transition-transform duration-700" x-transition:leave-start="-translate-y-0" x-transition:leave-end="-translate-y-full" style="display: none;">
<div x-show="open" class="w-auto max-w-lg mx-auto my-6" x-transition:enter="transform transition-transform duration-700" x-transition:enter-start="-translate-y-full" x-transition:enter-end="-translate-y-0" x-transition:leave="transform transition-transform duration-700" x-transition:leave-start="-translate-y-0" x-transition:leave-end="-translate-y-full" style="display: none;">
<div class="flex flex-col w-full bg-white border rounded-lg shadow-lg outline-none focus:outline-none">
<div class="flex p-4 border-b border-gray-200 border-solid rounded-t">
<h5 class="mx-0 text-xl font-medium">Modal title</h5>
<button type="button" class="px-6 py-2 m-1 ml-auto -mt-2 -mb-2 -mr-2 text-lg font-semibold text-center text-black bg-transparent rounded b-0" @click="open = ! open" x-on:click="scrollenable()">X</button>
</div>
<div class=" flex-auto p-4">
<p class="mb-4">I will not close if you click outside me. Don't even try to press escape key.</p>
</div>
<div class="flex flex-wrap justify-end p-2 border-t border-gray-200 border-solid">
<button type="button" class="inline-block px-6 py-2 m-1 text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700" @click="open = ! open" x-on:click="scrollenable()">Close</button>
<button type="button" class="inline-block px-6 py-2 m-1 text-center text-white transition-all duration-500 ease-in-out bg-blue-500 border border-blue-500 rounded shadow-md text-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600">Understood</button>
</div>
</div>
</div>
</div>
<span x-show="open" class="fixed bg-gray-900 bg-opacity-70 w-full h-full inset-x-0 top-0 z-40" x-transition:enter="transform transition-transform duration-600" x-transition:leave="transform transition-transform duration-700" style="display: none;">
</span>
</div>
When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
<div x-data="{ open: false}">
<button @click="open = ! open" x-on:click="scrolldisable()" class="mb-1 px-6 py-2 cursor-pointer text-white transition-all duration-500 ease-in-out bg-blue-500 border border-blue-500 rounded shadow-md hover:shadow-xl hover:bg-blue-600 hover:text-white">Vertically centered scrollable modal</button>
<div class="fixed w-full h-full top-0 z-50" x-show="open" style="display: none;">
<span x-on:click="scrollenable()" class="fixed bg-gray-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
<!-- Mobile navbar -->
<nav class="fixed inset-x-0 w-auto max-w-lg mx-auto my-6 z-40" x-show="open" @click.away="open=false" x-transition:enter="transform transition-transform duration-700" x-transition:enter-start="-translate-y-full" x-transition:enter-end="-translate-y-0" x-transition:leave="transform transition-transform duration-700" x-transition:leave-start="-translate-y-0" x-transition:leave-end="-translate-y-full" style="display: none;">
<div x-show="open" x-transition:enter="transform transition-transform duration-700" x-transition:enter-start="-translate-y-full" x-transition:enter-end="-translate-y-0" x-transition:leave="transform transition-transform duration-700" x-transition:leave-start="-translate-y-0" x-transition:leave-end="-translate-y-full" class="" style="display: none;">
<div class="flex flex-col w-full bg-white border rounded-lg shadow-lg outline-none focus:outline-none h-[95vh]">
<div class="flex p-4 border-b border-gray-200 border-solid rounded-t">
<h5 class="mx-0 text-xl font-medium">Modal title</h5>
<button type="button" class="px-6 py-2 m-1 ml-auto -mt-2 -mb-2 -mr-2 text-lg font-semibold text-center text-black bg-transparent rounded b-0" @click="open = ! open" x-on:click="scrollenable()">X</button>
</div>
<div class="p-4 overflow-hidden overflow-y-auto">
<p class="h-screen text-gray-600">This is some placeholder content to show the scrolling
behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height,
thereby showing inner scrolling. When content becomes longer than the prefedined max-height of
modal, content will be cropped and scrollable within the modal.</p>
<p class="text-gray-600">This content should appear at the bottom after you scroll.</p>
</div>
<div class="flex flex-wrap justify-end p-2 border-t border-gray-200 border-solid">
<button type="button" class="inline-block px-6 py-2 m-1 text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700" @click="open = ! open" x-on:click="scrollenable()">Close</button>
<button type="button" class="inline-block px-6 py-2 m-1 text-center text-white transition-all duration-500 ease-in-out bg-blue-500 border border-blue-500 rounded shadow-md text-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600">Save Changes</button>
</div>
</div>
</div>
</nav>
</div>
</div>
By default modal is set to the full screen of the device.
<div x-data="{ open: false}">
<button @click="open = ! open" x-on:click="scrolldisable()" class="mb-1 px-6 py-2 cursor-pointer text-white transition-all duration-500 ease-in-out bg-blue-500 border border-blue-500 rounded shadow-md hover:shadow-xl hover:bg-blue-600 hover:text-white">Full Screen</button>
<div x-show="open" class="fixed top-0 left-0 right-0 z-50 outline-none focus:outline-none" x-transition.duration.500ms="" style="display: none;">
<div class="flex flex-col w-full bg-white shadow-lg outline-none focus:outline-none h-[100vh]">
<div class="flex p-4 border-b border-gray-200 rounded-t">
<h5 class="mx-0 text-xl font-medium">Full screen modal</h5>
<button type="button" class="px-6 py-2 m-1 ml-auto -mt-2 -mb-2 -mr-2 text-lg font-semibold text-center text-black bg-transparent rounded b-0" @click="open = ! open" x-on:click="scrollenable()">X</button>
</div>
<p class="p-4 overflow-hidden h-screen text-gray-600">...</p>
<div class="flex justify-end p-2 border-t border-gray-200">
<button type="button" class="px-6 py-2 m-1 text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700" @click="open = ! open" x-on:click="scrollenable()">Close</button>
</div>
</div>
</div>
</div>