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

43k

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

3 years ago

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

Author:
R Thapa

2 years ago

17.4k
Confirmation Dialog Box

Author:
Anonymous

2 years ago

16.3k
Confirmation modal with blurred background

Author:
Orion.c

2 years ago

14k
Error popup modal

Author:
Odessa Young

2 years ago

16.3k
Blurred Background Modal

Author:
Prem..

2 years ago

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

Author:
Abigail

3 years ago

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

2 years ago

8.1k
Tailwind CSS Modal

Author:
Krishna Gudpalle

3 years ago

12k
Confirmation modal/card

Author:
Sophia Baker

3 years ago

15.8k
Confirmation model

Author:
Mr Robot

3 years ago

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

2 years ago

15.3k
Simple Alret Modal
Minimal Modal

Author:
_Amar_

3 years ago

12.2k
Login popup
with social media login buttons

Author:
Nikolai

1 year ago

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

2 years ago

7.1k
Incentives
tailwind css Incentives

Author:
Anonymous

2 years ago

5.3k
LoginModal-1
Popup modal with close

Author:
Rohan Babu

2 years ago

3.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components