DEV Community

Cover image for Alpine JS Delete Confirmation Modal
Arman Rahman
Arman Rahman

Posted on

4

Alpine JS Delete Confirmation Modal

Want to make like this?

Image description

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (1)

Collapse
 
aazwar profile image
Azrul Azwar •

You'd better used built-in tag

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay