Home
Maxim
Modal multiple window

85

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.8k

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

GALLERY

Author:
ORGIN_DREAMS

4 months ago

771
Sign in Modal
Login to continue modal

Author:
Anonymous

1 year ago

1.6k
Home page 2
Отзывчивый логотип по центру. Интерактивные кнопки призыва к действию.

Author:
Алла Телегина

8 months ago

815
Donate Hero section
Best New tailwindcss,help save the children

Author:
ORGIN_DREAMS

4 months ago

451
simple badge

Author:
Muhammad Imran

1 year ago

1.8k
Login popup
with social media login buttons

Author:
Nikolai

1 year ago

3.2k
User list
User list

Author:
Anonymous

4 months ago

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

Author:
Anonymous

6 months ago

494
Confirmation Dialog Box

Author:
Anonymous

2 years ago

15.9k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

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

Author:
Abigail

2 years ago

11.8k
Modal
Responsive model

Author:
inbarajan P

1 year ago

2.2k

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