The Bootstrap dialog box, aka modal.

All bootstrap options are supported. Use the data- form to adjust the options. Use a blank string for false and a non-blank string for true.

<modal data-backdrop="" data-keyboard="" data-show="1" data-remote="&foo_path">

The default for data-show has been changed to false. To display the dialog, set data-show=”1”, use a <modal-open-button> or use javascript ($('#foo-modal').modal('show'))

If you want to use modal as an alert box, just add content to the default param:

<modal>Warning!  Foo monsters!</modal>

To use modal to contain a form, you generally want to put the buttons into the footer, requiring you to override the modal parameter instead.

  <modal id="new-story-modal">
      <formlet owner="project" with="&this.stories.new" update="stories" success="$('#new-story-modal').modal('hide');">
        <modal-header>New Story</modal-header>
        <div class="modal-body">
          <field-list size="0" fields="title, body, status" />
  <modal-open-button modal="new-story-modal">New Story</modal-open-button>


  • modal
    • modal-header
    • default
    • modal-footer


  • data-show, data-backdrop, data-keyboard, data-remote: see Bootstrap documentation
  • title: the title. You may also adjust the title via the modal-header param.

Show Source

Edit this page