Alpine JS Delete Confirmation Modal

#alpinejs #alpine #armanrahman #javascript

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>

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);
            }

            .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>

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>

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more