Skip to content

Instantly share code, notes, and snippets.

@paulc

paulc/modal.html

Created October 31, 2022 15:59
Show Gist options
  • Save paulc/4a7ed6276ecbbfcc15c68933a47bcc31 to your computer and use it in GitHub Desktop.
Save paulc/4a7ed6276ecbbfcc15c68933a47bcc31 to your computer and use it in GitHub Desktop.
Download ZIP
Alpine.js/Bulma Modal
Raw
modal.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<script src="//unpkg.com/alpinejs" defer></script>
<title>Modal</title>
</head>
<body>
<section">
<div class="container m-3">
<h1>Modal</h1>
<div x-data="{ popup: false, content: 'model content' }">
<div class="modal" x-bind:class="popup && 'is-active'" x-on:keyup.escape.window="popup = false">
<div class="modal-background" x-on:click="popup = false"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close" x-on:click="popup = false"></button>
</header>
<section class="modal-card-body">
<div x-text="content"></text>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button" x-on:click="popup = false">Cancel</button>
</footer>
</div>
</div>
<button class="button is-small" x-on:click="popup = true">
Open Modal
</button>
</div>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment