Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Modal dialog with Alpine.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Alpine.js Modal Dialog</title>
<style>
[x-cloak] {
display: none !important;
}
.modal {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 10;
width: 100%;
height: 100%;
}
.model-inner {
background-color: white;
border-radius: 0.5em;
max-width: 600px;
padding: 2em;
margin: auto;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid black;
}
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: black;
opacity: 0.75;
}
</style>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body x-data="{ 'isModalOpen': false }" x-on:keydown.escape="isModalOpen = false">
<button x-on:click="isModalOpen = true">Open Modal</button>
<div
class="modal"
role="dialog"
tabindex="-1"
x-show="isModalOpen"
x-on:click.away="isModalOpen = false"
x-cloak
x-transition
>
<div class="model-inner">
<div class="modal-header">
<h3>Hello World</h3>
<button aria-label="Close" x-on:click="isModalOpen = false"></button>
</div>
<p>
Natus earum velit ab nobis eos. Sed et exercitationem voluptatum omnis
dolor voluptates. Velit ut ipsam sunt ipsam nostrum. Maiores officia
accusamus qui sapiente. Dolor qui vel placeat dolor nesciunt quo dolor
dolores. Quo accusamus hic atque nisi minima.
</p>
</div>
</div>
<div class="overlay" x-show="isModalOpen" x-cloak></div>
</body>
</html>
@w3collective

This comment has been minimized.

Copy link
Owner Author

@w3collective w3collective commented Aug 2, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment