Demo

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

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

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: <%= link_to("decidim-core/app/packs/src/decidim/a11y.js", "https://github.com/decidim/decidim/blob/develop/decidim-core/app/packs/src/decidim/a11y.js", target: "_blank", rel: "noopener noreferrer") %>


      <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_identificator" %> // ... 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 %>