How to make a full screen modal in tailwind?
How to make a full screen modal in tailwind?
1 answer
@tressie.damore
To create a full-screen modal using Tailwind CSS, you can utilize the built-in modal classes provided by the framework and customize them to fit your needs. Here is an example of how you can create a full-screen modal:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!-- Trigger button -->
<button
class="bg-blue-500 text-white font-bold py-2 px-4 rounded"
onclick="document.getElementById('myModal').classList.toggle('hidden')"
>
Open Modal
</button>
<!-- Modal content -->
<div
id="myModal"
class="fixed z-10 inset-0 overflow-y-auto hidden"
>
<div class="flex items-center justify-center min-h-screen">
<div
class="bg-white rounded-lg p-8 mx-4 md:mx-auto"
style="max-width: 600px;"
>
<!-- Modal content -->
<div class="text-center">
<h2 class="text-lg font-bold mb-4">Modal Title</h2>
<p>This is the modal content. You can customize this section as needed.</p>
<button
class="mt-6 bg-blue-500 text-white font-bold py-2 px-4 rounded"
onclick="document.getElementById('myModal').classList.toggle('hidden')"
>
Close Modal
</button>
</div>
</div>
</div>
</div>
|
In this example, we have a button that, when clicked, toggles the visibility of the modal by adding or removing the hidden class. The modal itself is a fixed-position element that covers the entire screen (inset-0) and has a minimum height of the viewport height (min-h-screen).
You can customize the modal content (e.g., title, text, buttons) as needed by adjusting the classes and styles applied to the elements within the modal. Feel free to add more styles, animations, or functionality to the modal to achieve the desired behavior.