Basic
Default
Most basic sample
Large modal
.modal-lgapplies to .modal-dialog
Small modal
.modal-smapplies to .modal-dialog
Modal width
Feel free to add any desire width to .modal-dialogusing inline style or .w-*pxutility classes.
Modal types
Top
.modal-topapplies to .modal
Center
.modal-centerapplies to .modal
Bottom
.modal-bottomapplies to .modal
Left
.modal-leftapplies to .modal
Fill
.modal-fillapplies to .modal
Right
.modal-rightapplies 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-bodyor 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, lgor 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-headerwhich contains title and close button. |
footerVisible | Boolean | true | Modal should have .modal-footerwhich 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-bodywhile the main content fetch from the URL. Default is: |
onShow | Function | null | Function to run when the show.bs.modalevent fires on the modal. |
onShown | Function | null | Function to run when the shown.bs.modalevent fires on the modal. |
onHide | Function | null | Function to run when the hide.bs.modalevent fires on the modal. |
onHidden | Function | null | Function to run when the hidden.bs.modalevent 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. |