bootstrap强化模态窗口插件
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('');
// 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