Want to make like this?
Step 1: At first connect AlpineJs in your project
<head>
<script defer src=”https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js”></script>
</head>
<script defer src=”https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js”></script>
</head>
Step 2: Then add this CSS
<style>
.modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
z-index: 99999;
transition: 0.4s ease;
width: 500px;
border-radius: 10px;
box-shadow: var(–tw-ring-offset-shadow, 0 0 #0000), var(–tw-ring-shadow, 0 0 #0000), var(–tw-shadow);
}
.modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
z-index: 99999;
transition: 0.4s ease;
width: 500px;
border-radius: 10px;
box-shadow: var(–tw-ring-offset-shadow, 0 0 #0000), var(–tw-ring-shadow, 0 0 #0000), var(–tw-shadow);
}
.overlay {
/* background-color: blue; */
position: fixed;
inset: 0;
z-index: 99998;
backdrop-filter: blur(5px);
background-color: rgb(0, 0, 0, 0.1);
transition: 0.4s ease;
}
.modal .modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px;
}
.modal .modal-head h4 {
margin: 0;
padding: 0;
font-size: 18px;
}
.modal .modal-body {
padding: 65px 0;
}
.modal .modal-body .large-icon {
font-size: 60px;
margin-bottom: 25px;
}
[x-cloak] {
display: none !important;
}
</style>
Step 3: Add This On your HTML File
<div x-data=”{deleteModal:false}”>
<div x-cloak x-show=”deleteModal”>
<div x-on:click=”deleteModal=false” class=”overlay”></div>
<div class=”modal”>
<div class=”modal-body”>
<div class=”flex justify-center items-center flex-col”>
<i class=”large-icon fa-regular fa-trash-can”></i>
<h5>Are You Sure?</h5>
<p>Are you sure to delete this?</p>
<div class=”flex g-10 justify-center”>
<a class=”btn-theme2″ x-on:click=”deleteModal=false” href=”javascript:void(0)”><i
class=”fa-solid fa-xmark”></i>Cancel</a>
<a class=”btn-theme” href=”#”><i class=”fa-solid fa-check”></i> Confirm
Delete</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div x-cloak x-show=”deleteModal”>
<div x-on:click=”deleteModal=false” class=”overlay”></div>
<div class=”modal”>
<div class=”modal-body”>
<div class=”flex justify-center items-center flex-col”>
<i class=”large-icon fa-regular fa-trash-can”></i>
<h5>Are You Sure?</h5>
<p>Are you sure to delete this?</p>
<div class=”flex g-10 justify-center”>
<a class=”btn-theme2″ x-on:click=”deleteModal=false” href=”javascript:void(0)”><i
class=”fa-solid fa-xmark”></i>Cancel</a>
<a class=”btn-theme” href=”#”><i class=”fa-solid fa-check”></i> Confirm
Delete</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Step 4: Add this button to Open this modal
<button x-on:click=”deleteModal = true” href=”javascript:voide(0)” class=”btn btn-primary”><i class=”fa-regular fa-trash-can”></i></button>
Please follow and like us:
