An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
Some of Our Sources
- BoingBoing
- Web Designer Wall
- Spoon Graphics
- Smashing Magazine
- Web Design Ledger
- Stylized Web
- Wal You
- Android Dissected
- Android Headlines
- Hashedout
Help Webnuz
Referal links:
Creating a modal dialog with Alpine.js
This is the second in our series of tutorials on the minimal JavaScript framework Alpine.js. In this tutorial well be creating a modal dialog component similar to the one created with vanilla JavaScript in this tutorial.
For the purposes of this tutorial you can load the framework via CDN as follows:
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>First add the following code to the <body> element in your HTML markup:
<body x-data="{'isModalOpen': false}" x-on:keydown.escape="isModalOpen=false">This stores the modal state (open/closed) using the x-data attribute. Weve also added a x-on attribute thatll trigger when the ESC key is pressed setting the isModalOpen state to false.
To display the modal well again use the x-on attribute on a button element. This will detect when the button has been clicked and set the isModalOpen state to true:
<button x-on:click="isModalOpen = true">Open Modal</button>Next the code for the modal element:
<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>Lets take a closer look at the Alpine.js code used here:
x-showwhenisModalOpenequalstruethis attribute toggles the modal visibility.x-on:click.awaydetect clicks outside the modal and set the state tofalseto hide.x-cloakprevents flicker of hidden element on page load requires CSS see below.x-transitiondefault transition to fade and scale an element on reveal.
To complete the HTML part of this tutorial well add an empty <div> thatll be used to apply a semi-transparent overlay over the page content that sits underneath the modal. Using the x-show attribute this only become visible when isModalOpen equals true:
<div class="overlay" x-show="isModalOpen" x-cloak></div>Now for the CSS starting with the modal itself:
.modal { display: flex; visibility: hidden; 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;}Then for x-cloak to work we must add the following CSS:
[x-cloak] { display: none !important;}Finally the CSS for the overlay:
.overlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: black; opacity: 0.75;}Thats all for this tutorial. If this was your first time learning about Alpine.js I would recommended reading the official documentation to see the full range of functionality available within the framework.
Original Link: https://dev.to/michaelburrows/creating-a-modal-dialog-with-alpinejs-40ig
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To