Home
Maxim
Modal multiple window

Modal multiple window

This tailwind example is contributed by Maxim, on 28-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are popup,dialog

Modal

Author Maxim

2k

10

Fork Fullscreen

<script src="//unpkg.com/alpinejs" defer></script>
 <div class="py-16">
	<div class="flex justify-center flex-wrap flex-row" x-data="{ openImage: null }">
		<template x-for="(image, index) in images" :key="index">
			<span class="p-4">
				<button type="button" class="w-full" x-on:click="openImage = index">
					<img class="max-w-full max-h-full w-24 h-24" :src="image.src" :alt="image.alt">
					<figcaption class="mt-2 text-sm text-center text-blue-500" x-text="image.caption"></figcaption>
				</button>
			</span>
		</template>
		<div x-show="openImage !== null" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="transform opacity-0 translate-y-full" x-transition:enter-end="transform opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="transform opacity-100 translate-y-0" x-transition:leave-end="transform opacity-0 translate-y-full" class="fixed inset-0 z-50 overflow-y-auto bg-black bg-opacity-50">
			<div class="flex items-center justify-center min-h-screen">
				<div class="relative w-full max-w-3xl">
					<button type="button" class="absolute top-0 right-0 m-4 text-white" x-on:click="openImage = null">
						<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
						</svg>
					</button>
					<img class="max-w-full" :src="images[openImage].src" :alt="images[openImage].alt">
					
				</div>
			</div>
		</div>
	</div>
	<script>
		let images = [
			{ src: "https://immaxim.com/site/assets/files/1125/vcard.png", alt: "Vcard", caption: "Vcard" },
			{ src: "https://immaxim.com/site/assets/files/1125/immaxim_com.png", alt: "immaxim.com website", caption: "Website" },
			{ src: "https://immaxim.com/site/assets/files/1125/vcard.png", alt: "Vcard", caption: "Vcard" },
			{ src: "https://immaxim.com/site/assets/files/1125/immaxim_com.png", alt: "immaxim.com website", caption: "Website" },
			{ src: "https://immaxim.com/site/assets/files/1125/vcard.png", alt: "Vcard", caption: "Vcard" },
			{ src: "https://immaxim.com/site/assets/files/1125/immaxim_com.png", alt: "immaxim.com website", caption: "Website" },
			{ src: "https://immaxim.com/site/assets/files/1125/vcard.png", alt: "Vcard", caption: "Vcard" },
			{ src: "https://immaxim.com/site/assets/files/1125/immaxim_com.png", alt: "immaxim.com website", caption: "Website" },
			{ src: "https://immaxim.com/site/assets/files/1125/vcard.png", alt: "Vcard", caption: "Vcard" },
		];
		
		document.addEventListener('click', function(event) {
		const modal = document.querySelector('.modal');
		if (modal && !modal.contains(event.target)) {
		 openImage = null;
		}
		});
	</script>
</div>

Related Examples

Incense Meditation
material used to produce a fragrant odor when burned.

Author:
Augustin

5 months ago

475
OTPverification

Author:
Ratikanta Pradhan

4 months ago

434
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

10 months ago

843
Animated modal with Tailwind Css and alpinejs

Author:
Michael Andreuzza

1 year ago

3.3k
Tailwind CSS Modal

Author:
Krishna Gudpalle

3 years ago

11.9k
Modal
Responsive model

Author:
inbarajan P

1 year ago

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

15k
Modal popup
Working modal in tailwind CSS Simple snippet for creating models with tailwind and javascript

Author:
Lukas Müller

2 years ago

42.5k
Confirmation modal with blurred background

Author:
Orion.c

2 years ago

13.7k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

Author:
anandu ap

1 year ago

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

Author:
R Thapa

2 years ago

16.9k
Error popup modal

Author:
Odessa Young

2 years ago

16.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12