Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Modal components
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>
Live demo
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>
Static backdrop
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>
Scrolling long content
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.
You can also create a scrollable modal that allows scroll the modal body by adding
.modal-dialog-scrollable to .modal-dialog.
<div class="modal-dialog modal-dialog-scrollable">
....
</div>Vertically centered
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
<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>