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
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 %>