Creating a modal dialog with Alpine.js
Tags: javascript, tutorial, alpine
Published: 2022-02-23 23:37:55

This is the second in our series of tutorials on the minimal JavaScript framework [Alpine.js](https://w3collective.com/tag/alpine/). In this tutorial we’ll be creating a modal dialog component similar to the one created with vanilla JavaScript in [this tutorial](https://w3collective.com/popup-modal-javascript/).

For the purposes of this tutorial you can load the framework via CDN as follows:

```html
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

First add the following code to the `<body>` element in your HTML markup:

```html
<body x-data="{'isModalOpen': false}" x-on:keydown.escape="isModalOpen=false">
```

This stores the modal state (open/closed) using the `x-data` attribute. We’ve also added a `x-on` attribute that’ll trigger when the `ESC` key is pressed setting the `isModalOpen` state to `false`.

To display the modal we’ll 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`:

```html
<button x-on:click="isModalOpen = true">Open Modal</button>
```

Next the code for the modal element:

```html
<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>
```

Let’s take a closer look at the Alpine.js code used here:

- `x-show` – when `isModalOpen` equals `true` this attribute toggles the modal visibility.
- `x-on:click.away` – detect clicks outside the modal and set the state to `false` to hide.
- `x-cloak` – prevents flicker of hidden element on page load – requires CSS see below.
- `x-transition` – default transition to fade and scale an element on reveal.

To complete the HTML part of this tutorial we’ll add an empty `<div>` that’ll 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`:

```html
<div class="overlay" x-show="isModalOpen" x-cloak></div>
```

Now for the CSS starting with the modal itself:

```css
.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:

```css
[x-cloak] {
  display: none !important;
}
```

Finally the CSS for the overlay:

```css
.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: black;
  opacity: 0.75;
}
```

That’s all for this tutorial. If this was your first time learning about Alpine.js I would recommended reading the [official documentation](https://alpinejs.dev/start-here) to see the full range of functionality available within the framework.