Modals

Available Sass Variables and default values

$modal-width: 600px
$modal-margin-top: 50px

$modal-backdrop-color: $bk
$modal-backdrop-opacity: .7

$modal-mobile-margin: 20px

$modal-footer-text-align: right

Available Javascript Variables

gaudi.modalFadeDuration = 300

Examples

Basic Modal

Modal markup is very simple. Simply add .modal to any element.

#modal.modal
  p I'm in a modal

Elements with .modal will be hidden by default when the page loads. The trigger to show a modal can be any element with a data-modal-src attribute. The value should be a CSS ID identifying the modal you wish to open.

a data-modal-src="#modal" Open

Card Modal

It is probably a good idea to put the content in a .card, but it's not required.

#modal.modal
  .card
    header Fact of the Day
    p You are smart
    footer
      a.btn-primary Agree
      a.btn-primary.pull-right Close

Close buttons

Manual close buttons are handy for large modals on mobile devices. To add one, just add data-close-modal to any element

#modal.modal
  .card
    header Fact of the Day
    p You are smart
    footer
      a.btn-primary data-close-modal="true" Close
Open

Remote Modals

Sometimes it is helpful to load a modal from a remote resource. To do so, replace the value of data-modal-src in the trigger with the URL of the modal.

a.btn-secondary data-modal-src="#{new_user_modal_path}" New User

When this anchor is clicked, the modal is retrieved, appended to the body of the page, then displayed as usual. It can be closed/destroyed in the same manner.

Modals with forms

If you have a form in your modal, you may want to add tabindex="-1" so the fields aren't part of the tab sequence

#modal.modal tabindex="-1"
  form ...

If the form is remote, remember to close the form when you get a successful response (usually in the .js response view - modal.close())

Javascript API

From any context you can call modal.close() to close the currently open modal.

From any context you can call modal.open(ID) to open a modal. ID should be a CSS ID identifying the modal you wish to open.

Confirmation Modals

To display a default confirmation dialog, add some data attributes to any link.

  • Modal Body: data-confirm="Are you sure?"
  • Confirm Button: data-confirm-yes="Do It"
  • Cancel Button: data-confirm-no="Never Mind"

By default the values are "Are You Sure?", "Yes", and "No"

The handler will return true or false depending on which button the user clicks.

a.btn-primary data-confirm="Really?" data-confirm-yes="Yup" data-confirm-no="Nope" Delete
Delete Rails disables data-confirm buttons if confirmed (so you can't click a delete button more than once).

Events

Modal components throw 4 events:

  • modal:before_open is dispatched before the fade in animation begins
  • modal:open is dispatched when the fade in animation is complete
  • modal:before_close is dispatched before the fade out animation begins
  • modal:close is dispatched when the fade out animation is complete