Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Modal dialog with Alpine.js
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Alpine.js Modal Dialog</title>
[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;
<script defer src=""></script>
<body x-data="{ 'isModalOpen': false }" x-on:keydown.escape="isModalOpen = false">
<button x-on:click="isModalOpen = true">Open Modal</button>
x-on:click.away="isModalOpen = false"
<div class="model-inner">
<div class="modal-header">
<h3>Hello World</h3>
<button aria-label="Close" x-on:click="isModalOpen = false"></button>
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.
<div class="overlay" x-show="isModalOpen" x-cloak></div>
Copy link

w3collective commented Aug 2, 2021

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