Dialogs

Dialogs are a javascript feature available thanks to an external library called a11y-dialog-component.

Demo

The dialogs, or modal components, are implemented through the rails helper decidim_modal.

I am a modal

Usage

An dialog requires two elements

1. A user actionable element, with the data-attribute data-dialog-open="example", where example is the id of the modal.

2. A modal element, whose id matches the data-target value the trigger refers to.

Source code on GitHub: decidim-core/app/packs/src/decidim/a11y.js


      <button data-dialog-open="example" class="button button__lg button__secondary">
  Show modal
</button>

<%= decidim_modal id: "example" do %>
  I am a modal
<% end %>

HTML tips

In order to display a complex modal, matching up the styles, do the following markup:

Pay attention to the data-attributes and the ids. For instance, the [data-dialog-title]'s id starts with dialog-title plus the modal id.


      <%= decidim_modal id: "example" do %>
  <div data-dialog-container>
    <%= icon "icon_identifier" %> // ... pick a desired icon
    <h3 id="dialog-title-example" tabindex="-1" data-dialog-title>
      Modal title
    </h3>
    <div>
      <p id="dialog-desc-example">
         Modal description (optional)
      </p>

      // ... add more HTML
    </div>
  </div>
  <div data-dialog-actions>
    <button data-dialog-close="example">
       Close modal
    </button>
    // ... add more buttons
  </div>
<% end %>