Skip to content

Instantly share code, notes, and snippets.

@javedbaloch4

javedbaloch4/modal.html

Last active September 9, 2020 21:31
Show Gist options
  • Save javedbaloch4/d58cfde9728ba65e3c61401565d8ba41 to your computer and use it in GitHub Desktop.
Save javedbaloch4/d58cfde9728ba65e3c61401565d8ba41 to your computer and use it in GitHub Desktop.
Download ZIP
TailwindCSS & AlpineJS Modal with References.
Raw
modal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.6.0/dist/alpine.min.js" defer></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="">
</head>
<body class="bg-gray-400">
<div class="container mx-auto px-4 xl:px-64 mt-12 mb-12">
<h2 class="text-2xl font-bold">Modal</h2>
<div x-data="{ isOpen: false }">
<button
class="bg-blue-700 text-white px-4 py-3 mt-4 text-sm rounded"
@click="isOpen = true
$nextTick(() => $refs.modalCloseButton.focus())
">
Open Modal
</button>
<div
style="background-color: rgba(0, 0, 0, .5)"
class="mx-auto absolute top-0 left-0 w-full h-full flex items-center shadow-lg overflow-y-auto"
x-show="isOpen"
>
<div class="container mx-auto rounded p-4 mt-2 overflow-y-auto">
<div class="bg-white rounded px-8 py-8">
<h1 class="font-bold text-2xl mb-3">Modal Title</h1>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro amet repellat recusandae.</p>
</div>
<div class="mt-4">
<button
class="bg-blue-700 text-white px-4 py-3 mt-4 text-sm rounded"
@click="isOpen = false"
x-ref="modalCloseButton"
>Close Modal</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment