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

1.7k

8

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

User list
User list

Author:
Anonymous

3 months ago

235
Error popup modal

Author:
Odessa Young

2 years ago

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

Author:
R Thapa

1 year ago

16.6k
Confirmation Modal for Critical Actions
A clean and responsive warning dialog component built with Tailwind CSS. Includes a title, descriptive text, and action buttons for confirmation or cancellation of critical actions.

Author:
Indra

2 weeks ago

68
Reward modal
A reward modal with refferal link

Author:
ehmasuk

4 days ago

9
OTPverification

Author:
Ratikanta Pradhan

2 months ago

267
Confirmation modal with blurred background

Author:
Orion.c

2 years ago

13.2k
Modal with Tailwind CSS

Author:
EliteAI Tools

8 months ago

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

8 months ago

716
Responsive Class List Table using Tailwind CSS
A responsive and customizable class list table built with Tailwind CSS, featuring actions for editing and deleting classes.

Author:
Anum Shahana

11 months ago

1.6k
Simple Alret Modal
Minimal Modal

Author:
_Amar_

3 years ago

11.6k
Tailwind CSS Modal

Author:
Krishna Gudpalle

3 years ago

11.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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.1