Home
Lukas Müller
Modal popup

Modal popup

Working modal in tailwind CSS
Simple snippet for creating models with tailwind and javascript

This tailwind example is contributed by Lukas Müller, on 27-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are popup,dialog

Modal

Author Lukas Müller

37.8k

Fork Fullscreen

<button class="bg-rose-500 text-white rounded-md px-4 py-2 hover:bg-rose-700 transition" onclick="openModal('modelConfirm')">
   Click to Open modal
</button>

<div class="p-6 pt-0 text-center">
            <svg class="w-20 h-20 text-red-600 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <h3 class="text-xl font-normal text-gray-500 mt-5 mb-6">Are you sure you want to delete this user?</h3>
            <a href="#"  onclick="closeModal('modelConfirm')"
                class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-base inline-flex items-center px-3 py-2.5 text-center mr-2">
                Yes, I'm sure
            </a>
            <a href="#" onclick="closeModal('modelConfirm')"
                class="text-gray-900 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-cyan-200 border border-gray-200 font-medium inline-flex items-center rounded-lg text-base px-3 py-2.5 text-center"
                data-modal-toggle="delete-user-modal">
                No, cancel
            </a>
        </div>

</div>
</div>

window.closeModal = function(modalId) {
        document.getElementById(modalId).style.display = 'none'
        document.getElementsByTagName('body')[0].classList.remove('overflow-y-hidden')
    }

// Close all modals when press ESC
    document.onkeydown = function(event) {
        event = event || window.event;
        if (event.keyCode === 27) {
            document.getElementsByTagName('body')[0].classList.remove('overflow-y-hidden')
            let modals = document.getElementsByClassName('modal');
            Array.prototype.slice.call(modals).forEach(i => {
                i.style.display = 'none'
            })
        }
    };
</script>

Related Examples

Responsive modal popup

Author:
I.P. Leroy

1 year ago

11.6k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

1 year ago

14k
Confirmation Dialog Box

Author:
Anonymous

1 year ago

12.8k
Confirmation modal with blurred background

Author:
Orion.c

1 year ago

11.1k
Error popup modal

Author:
Odessa Young

1 year ago

13.9k
Blurred Background Modal

Author:
Prem..

1 year ago

11.7k
Modal with background overlay
Reduce the opacity of the page content to bring the focus to the modal.

Author:
Abigail

1 year ago

10.5k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Author:
Ti To

1 year ago

6.3k
Tailwind CSS Modal

Author:
Krishna Gudpalle

2 years ago

10k
Confirmation modal/card

Author:
Sophia Baker

1 year ago

13.1k
Confirmation model

Author:
Mr Robot

2 years ago

12.1k
Social media login modal
Popup model for social media login. i.e. google and GitHub. you can add more buttons according to your need

Author:
Sameer Sultana

1 year ago

13.4k
Simple Alret Modal
Minimal Modal

Author:
_Amar_

2 years ago

10.6k
Login popup
with social media login buttons

Author:
Nikolai

9 months ago

2k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Author:
Ti To

1 year ago

5.4k
Incentives
tailwind css Incentives

Author:
Anonymous

11 months ago

3.8k
LoginModal-1
Popup modal with close

Author:
Rohan Babu

10 months ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components