index.html
bootstrap 4模态窗口增强插件
Make use of Bootstrap's 4 Modal in a more friendly way.
Full example
Full functionality of SimpleBsDialog.
Available options
Please note that all options described below are optional, but you will have a weird dialog if you don't even give it a title to display.
Most options can be set via init options or property setters.
| Option | Type | Default value | Description |
|---|---|---|---|
| width | String or Integer | 500 |
The dialog's width in pixels or percent. Examples:
SimpleBsDialog.show({
width: '900px',
});
SimpleBsDialog.show({ width: '70%', }); SimpleBsDialog.show({ width: '600', }); |
| autoWidth | Boolean | false | Enables resizing the dialog when the document is resized. It applies only when the 'width' value is set in percent. SimpleBsDialog.show({ width: '80%', autoWidth: true, }); |
| height | String or Integer | 280 |
The dialog's height in pixels or percent. Examples:
SimpleBsDialog.show({
height: '300px',
});
SimpleBsDialog.show({ height: '60%', }); |
| autoHeight | Boolean | false | Enables resizing the dialog when the document is resized. It applies only when the 'height' value is set in percent. SimpleBsDialog.show({ height: '60%', autoHeight: true, }); |
| title | String | The dialog's title. | |
| closable | Boolean | true | Show|hide the close button at the top right corner. |
| spinner | Boolean | false | Show|hide the spinner icon. |
| spinnerIcon | String | Set the spinner's icon. | |
| closeByBackdrop | Boolean | true | When it's true, you can close it by clicking outside the dialog. |
| closeByKeyboard | Boolean | true | When it's true, you can close it by pressing the ESC key. |
| html | String | The dialog's content. | |
| cssClass | String | Additional css classes that will be added to your dialog. | |
| buttons | Array |
Example:
SimpleBsDialog.show({
buttons: [{
id: 'btn-ok',
label: 'OK',
cssClass: 'btn-primary',
action: function(dialogRef) {
dialogRef.close();
},
},
],
});
id: optional, otherwise a random id will be generated. label: optional, the button's title. cssClass: optional, additional css class to be added to the button. action: optional, if provided, the callback will be invoked after the button is clicked, and the dialog instance will be passed to the callback function. |
|
| onShow | function | If provided, it will be invoked when the dialog is popping up. | |
| onShown | function | If provided, it will be invoked when the dialog is popped up. | |
| onHide | function | If provided, it will be invoked when the dialog is popping down. | |
| onHidden | function | If provided, it will be invoked when the dialog is popped down. |
Available methods
| Method | Description |
|---|---|
| open() | Opens the dialog. Usage: dialogInstance.open(). |
| close() | Closes the dialog. Usage: dialogInstance.close(). |
| get(option) |
Getter for options. You can get the following options: width, autoWidth, height, autoHeight, title, closable, spinner, spinnerIcon |
| set(option, value) |
Setter for a given option. You can set the following options: width, autoWidth, height, autoHeight, title, closable, spinner, spinnerIcon |
| set(options) |
Setter for many options. You can set the following options: width, autoWidth, height, autoHeight, title, closable, spinner, spinnerIcon |
| getModalBody() | Returns the raw modal body. |
| getButton(id) | Returns a button by id as a jQuery object. |
| getButtons() | Returns all available buttons as jQuery objects. |
| SimpleBsDialog.show(options) | Creates a new dialog with options, opens it and returns the dialog object. |
| SimpleBsDialog.version | Returns the current SimpleBsDialog's version. |
simple-bs-dialog.css
.simple-bs-dialog .modal-dialog,
.simple-bs-dialog .modal-content {
min-height: 200px;
}
.simple-bs-dialog .modal-body {
min-height: 80px;
}
.simple-bs-dialog .modal-spinner {
background: white;
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
simple-bs-dialog.js
(function(w, $) {
'use strict';
// register the main object
w.SimpleBsDialog = function(options) {
this.options = $.extend({}, {
id: newGuid(),
width: 500,
autoWidth: false,
height: 280,
autoHeight: false,
title: '',
closable: true,
spinner: false,
spinnerIcon: '',
closeByBackdrop: true,
closeByKeyboard: true,
html: '',
cssClass: '',
buttons: [],
onShow: function(dialogRef){},
onShown: function(dialogRef){},
onHide: function(dialogRef){},
onHidden: function(dialogRef){},
}, options);
};
// private methods
function newGuid()
{
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0, v = (c == 'x' ? r : r & 0x03 | 0x08);
return v.toString(16);
});
}
function setWidth(e, init)
{
var width = 0;
// parse width
if (e.data.options.width.toString().indexOf('px') >= 0) {
width = parseInt(e.data.options.width.toString().substring(0, e.data.options.width.toString().indexOf('px')));
} else if (e.data.options.width.toString().indexOf('%') >= 0) {
width = parseInt((parseInt(e.data.options.width.toString().substring(0, e.data.options.width.toString().indexOf('%'))) / 100) * $(window).outerWidth(true), 10);
} else {
width = parseInt(e.data.options.width);
}
// set left
$('#' + e.data.options.id).find('.modal-dialog').css({'margin-left': parseInt(($(window).outerWidth(true) - width) / 2, 10) + 'px'});
// set width
if (init === true || (e.data.options.autoWidth === true && e.data.options.width.toString().indexOf('%') >= 0)) {
$('#' + e.data.options.id).find('.modal-content').css({'width': width + 'px'}).find('.modal-body').css({'min-width': (width - 120) + 'px'});
}
}
function setHeight(e, init)
{
var height = 0;
// parse height
if (e.data.options.height.toString().indexOf('px') >= 0) {
height = parseInt(e.data.options.height.toString().substring(0, e.data.options.height.toString().indexOf('px')));
} else if (e.data.options.height.toString().indexOf('%') >= 0) {
height = parseInt((parseInt(e.data.options.height.toString().substring(0, e.data.options.height.toString().indexOf('%'))) / 100) * ($(window).outerHeight(true) - parseInt($('#' + e.data.options.id).find('.modal-dialog').css('margin-top'), 10)), 10);
} else {
height = parseInt(e.data.options.height);
}
// set height
if (init === true || (e.data.options.autoHeight === true && e.data.options.height.toString().indexOf('%') >= 0)) {
$('#' + e.data.options.id).find('.modal-content').css({'min-height': height + 'px'}).find('.modal-body').css({'min-height': (height - 120) + 'px'});
}
}
function setSize(e)
{
setWidth(e, false);
setHeight(e, false);
}
function validOptions()
{
return [
'width',
'autoWidth',
'height',
'autoHeight',
'title',
'closable',
'spinner',
'spinnerIcon',
];
}
function parseCssClass(cssClass)
{
var cssClasses = cssClass.split(' ');
if (cssClasses.length == 0) {
return '';
}
return ' ' + cssClasses.join(' ');
}
// public methods
SimpleBsDialog.prototype.open = function()
{
// store this
var dialog = this;
// bootstrap dialog
$('body').append('' + dialog.options.title + '' + dialog.options.html + '' + dialog.options.spinnerIcon + '' + (dialog.options.buttons.length > 0 ? '' : '') + '');
// add buttons
$.each(dialog.options.buttons, function(index, options) {
var opts = $.extend({}, {
id: newGuid(),
label: '',
cssClass: '',
action: function(dialogRef){},
}, options);
var button = $('');
button.on('click', function(e) {
opts.action(dialog);
});
$('#' + dialog.options.id).find('.modal-footer').append(button);
});
// destroy dom element
$('#' + dialog.options.id).on('show.bs.modal', function() {
// initial width
setWidth({
data: dialog,
}, true);
// initial height
setHeight({
data: dialog,
}, true);
// set dialog's auto size
$(window).on('resize', dialog, setSize);
// onShow event
dialog.options.onShow(dialog);
}).on('shown.bs.modal', function() {
// onShown event
dialog.options.onShown(dialog);
}).on('hide.bs.modal', function(e) {
// onHide event
dialog.options.onHide(dialog);
}).on('hidden.bs.modal', function(e) {
// cancel dialog's auto size
$(window).off('resize', setSize);
// remove dialog's div
$('#' + dialog.options.id).remove();
// onHidden event
dialog.options.onHidden(dialog);
}).modal({
'backdrop': dialog.options.closeByBackdrop,
'keyboard': dialog.options.closeByKeyboard,
});
// return main object
return this;
}
SimpleBsDialog.prototype.close = function()
{
$('#' + this.options.id).modal('hide');
// return main object
return this;
}
SimpleBsDialog.prototype.get = function(option)
{
if (validOptions().indexOf(option) > -1) {
return this.options[option];
}
}
SimpleBsDialog.prototype.set = function(options, value)
{
if (!$.isPlainObject(options) && validOptions().indexOf(options) > -1) {
var option = options;
options = {};
options[option] = value;
}
if ($.isPlainObject(options)) {
// store this
var dialog = this;
$.each(options, function(option, value) {
switch (option) {
case 'width': {
// new width
dialog.options.width = value;
// init new size
setWidth({
data: dialog,
}, true);
break;
}
case 'autoWidth': {
// new autoWidth
dialog.options.autoWidth = value;
// init new size
setWidth({
data: dialog,
}, true);
break;
}
case 'height': {
// new height
dialog.options.height = value;
// init new size
setHeight({
data: dialog,
}, true);
break;
}
case 'autoHeight': {
// new autoHeight
dialog.options.autoHeight = value;
// init new size
setHeight({
data: dialog,
}, true);
break;
}
case 'title': {
// update dialog's title
$('#' + dialog.options.id).find('.modal-title').html(dialog.options.title = value);
break;
}
case 'closable': {
// update dialog's closable
if (dialog.options.closable = value) {
$('#' + dialog.options.id).find('.modal-header button.close').removeClass('d-none');
} else {
$('#' + dialog.options.id).find('.modal-header button.close').addClass('d-none');
}
break;
}
case 'spinner': {
// update dialog's spinner
if (dialog.options.spinner = value) {
$('#' + dialog.options.id).find('.modal-spinner').removeClass('d-none');
} else {
$('#' + dialog.options.id).find('.modal-spinner').addClass('d-none');
}
break;
}
case 'spinnerIcon': {
// update dialog's spinnerIcon
$('#' + dialog.options.id).find('.modal-spinner').html(dialog.options.spinnerIcon = value);
break;
}
}
});
}
// return main object
return this;
}
SimpleBsDialog.prototype.getModalBody = function()
{
// get modal body
return $('#' + this.options.id).find('.modal-body');
}
SimpleBsDialog.prototype.getButton = function(id)
{
// get button's object
return $('#' + this.options.id).find('.modal-footer button#' + id);
}
SimpleBsDialog.prototype.getButtons = function()
{
// get all the buttons' object
return $('#' + this.options.id).find('.modal-footer button');
}
// for lazy people
SimpleBsDialog.show = function(options)
{
return (new SimpleBsDialog(options)).open();
}
// current version
SimpleBsDialog.version = '1.0.1';
}(window, jQuery));
参考：http://www.bootstrapmb.com/item/6561/preview
