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