The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>Call a modal with id myModal with a single line of JavaScript:
wvusUikit('#myModal').modal(options)Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".
| Name | type | default | description |
|---|---|---|---|
| backdrop | boolean or the string 'static' |
true | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
| keyboard | boolean | true | Closes the modal when escape key is pressed |
| show | boolean | true | Shows the modal when initialized. |
| remote | path | false | If a remote URL is provided, content will be loaded one time via jQuery's |
Activates your content as a modal. Accepts an optional options object.
wvusUikit('#myModal').modal({
keyboard: false
})Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).
wvusUikit('#myModal').modal('toggle')Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).
wvusUikit('#myModal').modal('show')Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).
wvusUikit('#myModal').modal('hide')Bootstrap's modal class exposes a few events for hooking into modal functionality.
| Event Type | Description |
|---|---|
| show.bs.modal | This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
| shown.bs.modal | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. |
| hide.bs.modal | This event is fired immediately when the hide instance method has been called. |
| hidden.bs.modal | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
| loaded.bs.modal | This event is fired when the modal has loaded content using the remote option. |
wvusUikit('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})