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

41.1k

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

2 years ago

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

Author:
R Thapa

1 year ago

15.9k
Confirmation Dialog Box

Author:
Anonymous

1 year ago

14.8k
Confirmation modal with blurred background

Author:
Orion.c

2 years ago

12.6k
Error popup modal

Author:
Odessa Young

2 years ago

15.3k
Blurred Background Modal

Author:
Prem..

2 years ago

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

Author:
Abigail

2 years ago

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

Author:
Ti To

1 year ago

7.3k
Tailwind CSS Modal

Author:
Krishna Gudpalle

2 years ago

11k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

14.7k
Confirmation model

Author:
Mr Robot

2 years ago

12.6k
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

14.5k
Simple Alret Modal
Minimal Modal

Author:
_Amar_

2 years ago

11.3k
Login popup
with social media login buttons

Author:
Nikolai

1 year ago

2.6k
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

6.3k
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

4.5k
LoginModal-1
Popup modal with close

Author:
Rohan Babu

1 year ago

3.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components