bsWindow
A small javascript module for creating bootstrap 4 modal dialog windows.
Example
Instead of writing code like this:
<div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>
β¦you may just write something like:
bsWindow.show({ title: 'Modal title', message: '<p>Modal body text goes here.</p>', buttons: [ { label: 'Close', action: function(atr) { atr.close(); } } ] });
β¦or even:
bsWindow.alert('Modal body text goes here', 'Title');
Usage (module methods)
Alert
A simple alert window, like native javascript alert.
Usage: bsWindow.alert(text, title, cb);
.
Where:
text
β Message text.title
β Optional. Message title.cb
β Optional. Callback function, that fired after the dialog will be closed.
Confirm
Another analog of native javascript function confirm.
Usage similar: bsWindow.confirm(text, title, cb);
.
The user choice will be passed to the callback attribute as boolean value.
Prompt
And another one analog of native JS function.
Usage: bsWindow.prompt(text, defaultValue, title, cb);
.
The user's answer will be passed to callback the same way as it native JS function do (if user cancelled dialog window, there will be null
).
More complex modal dialogs
Usage: bsWindow.show(options);
.
Where options
is an object, containing the following settings (All of them are optional):
title
β Window title.message
β Window message.animate
β Window animation. Defaulttrue
.large
β Window large width. Defaultfalse
.small
β Window small width. Defaultfalse
.closeable
β Window closeable. Defaulttrue
.buttons
β Array ofbutton
objects, each of them may have the following settings:label
β Label text of button.className
β A string that will be added to class attribute of button. Default:btn-secondary
.action
β Optional. A callback function, that fired when user clicks a button.
onAppear
β Callback function, that fired when window did appear.onDisappear
β Callback function, that fired when window did disappear.
Every callback function (button action
or onAppear
/onDisappear
) gets object with following properties as attribute:
element
β DOM element of dialog window itself.close
β A function, implemented to close window, if needed. It will destroy the generated DOM elements of modal dialog.