Next we have this empty div which is used as a modal backdrop, nothing special about it so we add the aria-hidden attribute which just hides this div from accessbility technologies: x-show is probably self-explanatory and then we have $refs.modal1_button.focus() which will use the x-ref we set in the button to set focus to it once the modal is closed. Next is aria-modal attribute which tells accessibility technologies that the content underneath this dialog won't be available for interaction while it's open. Then, we have the aria-labelledby attribute, which will set the accessible name of the container to the modal title (h2 tag). You'll notice the `role` attribute and it's set to "dialog" which according to W3 is a way to identify the element that serves as the dialog container. This is there so we can retrieve a reference to the button element and set focus to it once the modal is closed which is helpful for people who use the keyboard to navigate around the page. This is the button that will trigger the modal to open (classes ommited), other than the known = true" which you are probably familiar with, we have the x-ref="modal1_button" attribute. No transitions, no flair, just a plain modal.
This will get you a very simple modal window when you click on the "Open modal" button. So, inside this container, we will add a button to open the modal and the modal’s markup as well: You can have multiple containers like this to control different aspects of the page, but they would be independent. Let’s begin by adding a container that will hold Alpine.js' state: Įverything that Alpine.js controls and is related to the modal will need to be inside this. Ok, now, we’re ready to start building stuff. As in other Alpine.js' posts, I’ll use TailwindCSS for the styling, so all you need to do is add these two lines in the section of your page (just remember that it is not a purged version of TailwindCSS, so don’t really use it for production): We will use these basic concepts and build a "regular" modal. That ensures that when the modal is open, if a click happens outside of the modal tree, it will hide the it.
There’s also something very cool which is the "away" event modifier. Very straight forward, you will just control the "open" state of the modal and change with the button click event. The simplest example of a modal is the one you can find in Alpine.js’ own documentation, and it is for a dropdown modal which would be like this: Let’s build an accessible modal with Alpine.js
0 kommentar(er)
