Alpine JS Tailwind Modal Example
May 14, 2021 . Admin
Hi Dev,
In This Tutorial, I will Explain you how to use open and show modal in Alpine Js using tailwind how to open a full screen modal window dialog clicking of a button and close it again with alpine JS and Tailwind css.
How we can establish a modal that can be used anywhere on your project.you can also use this example in your php laravel alpine js project.
Now, We require to establish somewhere to instantiate our Alpine data, for this example we'll utilize a <div> but it could be any element that you wish as long as it wraps the whole content.
Inside of that, we require to integrate the basic structure of a modal. This will be the full-screen overlay background as well as the white box to contain the modal content itself.
Next, let's add a trigger so that we can open the modal. In this example, it's a button but it could also be any a
When we press the button, we will see the modal popup but we don't have any way to close it. Let's see important point.
- integrate a @click.away event listener to the inner modal so that if we click outside of the white content it will additionally close.
Here, I will give you full example for simply display alpine js tailwind css modal as bellow.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<style type="text/css">
body{
padding: 50px;
background-color: #f7fcff;
}
</style>
</head>
<body>
<h1>Alpine JS Tailwind Modal Example - MyWebTuts.com</h1>
<!-- 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 Here
</h3>
<div class="mt-2">
<p class="text-sm leading-5 text-gray-500">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</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>
</body>
</html>
I Hope It Will Help You..