Skip to content

Instantly share code, notes, and snippets.

@Apatrid

Apatrid/lightbox-modal.html

Created November 24, 2020 09:29
Show Gist options
  • Save Apatrid/0f01400b9c87a5a6673abb71f66d29a9 to your computer and use it in GitHub Desktop.
Save Apatrid/0f01400b9c87a5a6673abb71f66d29a9 to your computer and use it in GitHub Desktop.
Download ZIP
Alpine.js + TailwindCSS Lightbox Modal
Raw
lightbox-modal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine.js-TailwindCSS-Lightbox-Modal</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="{ imgModal : false, imgModalSrc : '', imgModalDesc : '' }">
<template @img-modal.window="imgModal = true; imgModalSrc = $event.detail.imgModalSrc; imgModalDesc = $event.detail.imgModalDesc;" x-if="imgModal">
<div x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" x-on:click.away="imgModalSrc = ''" class="p-2 fixed w-full h-100 inset-0 z-50 overflow-hidden flex justify-center items-center bg-black bg-opacity-75">
<div @click.away="imgModal = ''" class="flex flex-col max-w-3xl max-h-full overflow-auto">
<div class="z-50">
<button @click="imgModal = ''" class="float-right pt-2 pr-2 outline-none focus:outline-none">
<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
</path>
</svg>
</button>
</div>
<div class="p-2">
<img :alt="imgModalSrc" class="object-contain h-1/2-screen" :src="imgModalSrc">
<p x-text="imgModalDesc" class="text-center text-white"></p>
</div>
</div>
</div>
</template>
</div>
<div x-data="{}" class="px-2">
<div class="flex -mx-2">
<div class="w-1/6 px-2">
<div class="bg-gray-400">
<a @click="$dispatch('img-modal', { imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: 'Random Image One Description' })" class="cursor-pointer">
<img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/300/200">
</a>
</div>
</div>
<div class="w-1/6 px-2">
<div class="bg-gray-400">
<a @click="$dispatch('img-modal', { imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: '' })" class="cursor-pointer">
<img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
</a>
</div>
</div>
<div class="w-1/6 px-2">
<div class="bg-gray-400">
<a @click="$dispatch('img-modal', { imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: '' })" class="cursor-pointer">
<img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
</a>
</div>
</div>
<div class="w-1/6 px-2">
<div class="bg-gray-400">
<a @click="$dispatch('img-modal', { imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: '' })" class="cursor-pointer">
<img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
</a>
</div>
</div>
<div class="w-1/6 px-2">
<div class="bg-gray-400">
<a @click="$dispatch('img-modal', { imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: '' })" class="cursor-pointer">
<img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
</a>
</div>
</div>
<div class="w-1/6 px-2">
<div class="bg-gray-400">
<a @click="$dispatch('img-modal', { imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: '' })" class="cursor-pointer">
<img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment