Native HTML dialog with Ruby on Rails and Stimulus

The <dialog> element is widely available, which means that we don’t really need third party libraries just to be able to add dialogs (aka. modals) to a web application. Using it with Rails and Stimulus is very easy.

The following HTML snippet shows a minimal markup defining the dialog and adding the stimulus controller directives.
The dialog won’t show up before triggering it with showModal.
It can then be closed by either clicking the button or by hitting the ESC key.

<div data-controller='dialog'>
  <button data-action='dialog#open'>Open dialog</button>

  <dialog data-dialog-target='dialog'>
    <p>
      Content of the dialog
    </p>

    <button data-action='dialog#close'>Close dialog</button>
  </dialog>
</div>

The corresponding stimulus controller is absolutely trivial.

// file: controllers/dialog_controller.js

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["dialog"];

  open() {
    this.dialogTarget.showModal();
  }

  close() {
    this.dialogTarget.close();
  }
}

I also added some CSS to make the dialog look a bit nicer. Most notable is the ::backdrop definition, which adds a semi transparent backdrop, and the drop shadow box-shadow, which make it stand out a bit more.

dialog {
  background-color: $color-background;
  border: none;
  box-shadow: 0 0 10px #000;
  color: $color-text;

  &::backdrop {
    background-color: #000000bf;
  }
}

In the wild

The code above is an extract of the dialogs I added to Should I Watch This?

You can have a look at the markup of the rating dialog, the stimulus controller and the CSS.