bh v0.0.16 Bh.Bh4.Modal View Source

Twitter Bootstrap 4 modal helpers for Phoenix.

Examples

Real live examples can be found on the site of the Project.

Link to this section Summary

Functions

Generates basic HTML markup for modals.

Generates complex HTML markup for modals.

Link to this section Functions

Generates basic HTML markup for modals.

Examples

This snippet will generate modal HTML markup with content block with provided text and footer block with "Close" button. This modal will have default id - "myModal".

<%= bh_modal "Modal content" %>

Generates complex HTML markup for modals.

Options

  • :id - id of the modal. Default id is "myDialog". In case of rendering multiple modals on the same page, be sure to pass different ids for each of them (or only the first one will be displayed when used). Keep in mind, that valid page should not have two same ids.

  • :size - size of the modal dialog. Supported sizes: :small, :large. When size is not provided, dialog is rendered in standard size.

  • :title - title of the modal dialog. When provided, modal will render title block with close icon. When :title option provided, footer block with close button will not be rendered by default.

Examples

In order to give modal a specific id (in case you have multiple modals on one page), you have to pass an :id option.

<%= bh_modal "Modal content", id: "myCustomId" %>

If you want to make modal smaller or larger - you can pass :size option.

<%= bh_modal "Modal content", id: "myCustomId", size: :large %>

This will render the title block with the close icon, provided title and given content. Footer with the "Close" button as a redundant element will not be rendered by default when :title is provided.

<%= bh_modal "Modal content", title: "Modal title" %>

If you need complex HTML markup to be used to display coplex text inside modal window, you can give bh_modal function a block that will be taken for content. Please, note that in such case you should not pass the first string argument, but only the list of options.

<%= bh_modal title: "Modal title", size: :small do %>
  <p>Some content. <b>Bold</b> and <i>italic</i> text.</p>
<% end %>