Basic

Default

Most basic sample

Large modal

.modal-lg applies to .modal-dialog

Small modal

.modal-sm applies to .modal-dialog

Modal width

Feel free to add any desire width to .modal-dialog using inline style or .w-*px utility classes.

Modal types

Top

.modal-top applies to .modal

Center

.modal-center applies to .modal

Bottom

.modal-bottom applies to .modal

Left

.modal-left applies to .modal

Fill

.modal-fill applies to .modal

Right

.modal-right applies to .modal

Modaler

Modaler is a shorthand utility to create modals for a specified content. You can create any type of modals using modaler plugin. The content can be load from a specific URL, direct HTML or HTML of targeted element.

Examples using Javascript

Basic

Some options

Events



Examples using data attributes

Basic

Some options

Events

Usage

Trigger the modaler via JavaScript:

app.modaler(options)

Trigger the modaler via data-attribute when user click on the element:

<button data-provide="modaler" data-url="path/to/modal.html">Launch modaler</button>
Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-url="value" or data-is-modal="value".

Name Type Default Description
url String null Provide a URL that content should come from. It could be a content to insert inside .modal-body or a whole modal component (see isModal).
isModal Boolean false If you are loading a modal component instead of a content, you should set this option to true.
Please note that if it's true, the rest of options doesn't work anymore.
html String null The HTML content to be inserted inside .modal-body.
target String null A selector to retrive HTML from and insert inside .modal-body.
type String null Any modal type from: top, bottom, left, right, center, fill,
size String null sm, lg or any .w-* utility clasess.
title String null Title of the modal.
backdrop Boolean true Includes a modal-backdrop element.
headerVisible Boolean true Modal should have .modal-header which contains title and close button.
footerVisible Boolean true Modal should have .modal-footer which contains action buttons.
confirmVisible Boolean true Include a confirm button in the footer.
confirmText String 'Ok' Use this to change the text on the confirm button.
confirmClass String 'btn btn-w-sm btn-flat btn-primary' Use this option to change appearance of confirm button.
cancelVisible Boolean false Include a cancel button in the footer.
cancelText String 'Cancel' Use this to change the text on the cancel button.
cancelClass String 'btn btn-w-sm btn-flat btn-secondary' Use this option to change appearance of cancel button.
bodyExtraClass String null Add extra classes to .modal-body.
spinner String See description A HTML content to place inside .modal-body while the main content fetch from the URL. Default is:
<div class="h-200px center-vh">
  <svg class="spinner-circle-material-svg" viewBox="0 0 50 50">
    <circle class="circle" cx="25" cy="25" r="20">
  </svg>
</div>
onShow Function null Function to run when the show.bs.modal event fires on the modal.
onShown Function null Function to run when the shown.bs.modal event fires on the modal.
onHide Function null Function to run when the hide.bs.modal event fires on the modal.
onHidden Function null Function to run when the hidden.bs.modal event fires on the modal.
onConfirm Function null Function to run when confirm button clicks, provides modal DOM element as the first argument.
onCancel Function null Function to run when cancel button clicks, provides modal DOM element as the first argument.