标签：模态 function 插件 bootstrap height width dialog id options
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap 4模态窗口增强插件 </title>
<link rel="stylesheet" href="http://cdn.bootstrapmb.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="./src/css/simple-bs-dialog.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.bootstrapmb.com/jquery/jquery-3.3.1.min.js"></script>
<script src="http://cdn.bootstrapmb.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<script src="./src/js/simple-bs-dialog.js"></script>
<style>
.login-dialog .modal-header {
color: #0480be;
}
</style>
</head>
<body>
<div class="container">
<h2>Make use of Bootstrap's 4 Modal in a more friendly way.</h2>
<hr />
<h3>Full example</h3>
<p>Full functionality of SimpleBsDialog.</p>
<div class="source-code runnable">
<!--
SimpleBsDialog.show({
width: '900px',
autoWidth: false,
height: '30%',
autoHeight: true,
title: 'Simple Bootstrap 4 Dialog (v' + SimpleBsDialog.version + ')',
closable: true,
spinner: true,
spinnerIcon: '<span class="spinner-border text-primary" role="status"></span>',
closeByBackdrop: true,
closeByKeyboard: true,
html: '',
cssClass: 'login-dialog',
buttons: [{
id: 'btn-ok',
label: 'OK',
cssClass: 'btn-primary',
action: function(dialogRef) {
console.log('OK button pressed!');
dialogRef.close();
},
}, {
id: 'btn-cancel',
label: 'Cancel',
cssClass: 'btn-warning',
action: function(dialogRef) {
console.log('Cancel button pressed!');
dialogRef.close();
},
},
],
onShow: function(dialogRef) {
console.log('onShow');
dialogRef.getButtons().prop('disabled', true);
},
onShown: function(dialogRef) {
console.log('onShown');
setTimeout(function() {
dialogRef.set({
'spinner': false,
}).getModalBody().html('Your content goes here...');
dialogRef.getButtons().prop('disabled', false);
}, 1000);
},
onHide: function(dialogRef) {
console.log('onHide');
},
onHidden: function(dialogRef) {
console.log('onHidden');
},
});
-->
</div>
<!-- Available options -->
<br />
<a name="available-options"></a>
<h2>Available options</h2>
<hr />
<p>
Please note that all options described below are <strong>optional</strong>, but you will have a weird dialog if you don't even give it a title to display.
<br />
Most options can be set via init options or property setters.
</p>
<table class="table table-bordered">
<thead>
<tr>
<th>
Option
</th>
<th>
Type
</th>
<th>
Default value
</th>
<th>
Description
</th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>
String or Integer
</td>
<td>
500
</td>
<td>
The dialog's width in pixels or percent. Examples:
<div class="source-code runnable">
SimpleBsDialog.show({
width: '900px',
});
</div>
<hr />
<div class="source-code runnable">
SimpleBsDialog.show({
width: '70%',
});
</div>
<hr />
<div class="source-code runnable">
SimpleBsDialog.show({
width: '600',
});
</div>
</td>
</tr>
<tr>
<td>autoWidth</td>
<td>
Boolean
</td>
<td>
false
</td>
<td>
Enables resizing the dialog when the document is resized. It applies only when the 'width' value is set in percent.
<div class="source-code runnable">
SimpleBsDialog.show({
width: '80%',
autoWidth: true,
});
</div>
</td>
</tr>
<tr>
<td>height</td>
<td>
String or Integer
</td>
<td>
280
</td>
<td>
The dialog's height in pixels or percent. Examples:
<div class="source-code runnable">
SimpleBsDialog.show({
height: '300px',
});
</div>
<hr />
<div class="source-code runnable">
SimpleBsDialog.show({
height: '60%',
});
</div>
</td>
</tr>
<tr>
<td>autoHeight</td>
<td>
Boolean
</td>
<td>
false
</td>
<td>
Enables resizing the dialog when the document is resized. It applies only when the 'height' value is set in percent.
<div class="source-code runnable">
SimpleBsDialog.show({
height: '60%',
autoHeight: true,
});
</div>
</td>
</tr>
<tr>
<td>title</td>
<td>
String
</td>
<td></td>
<td>
The dialog's title.
</td>
</tr>
<tr>
<td>closable</td>
<td>
Boolean
</td>
<td>
true
</td>
<td>
Show|hide the close button at the top right corner.
</td>
</tr>
<tr>
<td>spinner</td>
<td>
Boolean
</td>
<td>
false
</td>
<td>
Show|hide the spinner icon.
</td>
</tr>
<tr>
<td>spinnerIcon</td>
<td>
String
</td>
<td>
<div class="source-code"><span class="spinner-border" role="status"></span></div>
</td>
<td>
Set the spinner's icon.
</td>
</tr>
<tr>
<td>closeByBackdrop</td>
<td>
Boolean
</td>
<td>
true
</td>
<td>
When it's true, you can close it by clicking outside the dialog.
</td>
</tr>
<tr>
<td>closeByKeyboard</td>
<td>
Boolean
</td>
<td>
true
</td>
<td>
When it's true, you can close it by pressing the ESC key.
</td>
</tr>
<tr>
<td>html</td>
<td>
String
</td>
<td></td>
<td>
The dialog's content.
</td>
</tr>
<tr>
<td>cssClass</td>
<td>
String
</td>
<td></td>
<td>
Additional css classes that will be added to your dialog.
</td>
</tr>
<tr>
<td>buttons</td>
<td>
Array
</td>
<td></td>
<td>
Example:
<div class="source-code runnable">
SimpleBsDialog.show({
buttons: [{
id: 'btn-ok',
label: 'OK',
cssClass: 'btn-primary',
action: function(dialogRef) {
dialogRef.close();
},
},
],
});
</div>
<strong>id</strong>: optional, otherwise a random id will be generated.<br />
<strong>label</strong>: optional, the button's title.<br />
<strong>cssClass</strong>: optional, additional css class to be added to the button.<br />
<strong>action</strong>: optional, if provided, the callback will be invoked after the button is clicked, and the dialog instance will be passed to the callback function.<br />
</td>
</tr>
<tr>
<td>onShow</td>
<td>
function
</td>
<td></td>
<td>
If provided, it will be invoked when the dialog is popping up.
</td>
</tr>
<tr>
<td>onShown</td>
<td>
function
</td>
<td></td>
<td>
If provided, it will be invoked when the dialog is popped up.
</td>
</tr>
<tr>
<td>onHide</td>
<td>
function
</td>
<td></td>
<td>
If provided, it will be invoked when the dialog is popping down.
</td>
</tr>
<tr>
<td>onHidden</td>
<td>
function
</td>
<td></td>
<td>
If provided, it will be invoked when the dialog is popped down.
</td>
</tr>
</tbody>
</table>
<!-- Available methods -->
<br />
<a name="available-methods"></a>
<h2>Available methods</h2>
<hr />
<table class="table table-bordered">
<thead>
<tr>
<th>
Method
</th>
<th>
Description
</th>
</tr>
</thead>
<tbody>
<tr>
<td>open()</td>
<td>Opens the dialog. Usage: dialogInstance.open().</td>
</tr>
<tr>
<td>close()</td>
<td>Closes the dialog. Usage: dialogInstance.close().</td>
</tr>
<tr>
<td>get(option)</td>
<td>
Getter for options. You can get the following options:<br />
<strong>width, autoWidth, height, autoHeight, title, closable, spinner, spinnerIcon</strong>
</td>
</tr>
<tr>
<td>set(option, value)</td>
<td>
Setter for a given option. You can set the following options:<br />
<strong>width, autoWidth, height, autoHeight, title, closable, spinner, spinnerIcon</strong>
</td>
</tr>
<tr>
<td>set(options)</td>
<td>
Setter for many options. You can set the following options:<br />
<strong>width, autoWidth, height, autoHeight, title, closable, spinner, spinnerIcon</strong>
</td>
</tr>
<tr>
<td>getModalBody()</td>
<td>Returns the raw modal body.</td>
</tr>
<tr>
<td>getButton(id)</td>
<td>Returns a button by id as a jQuery object.</td>
</tr>
<tr>
<td>getButtons()</td>
<td>Returns all available buttons as jQuery objects.</td>
</tr>
<tr>
<td>SimpleBsDialog.show(options)</td>
<td>Creates a new dialog with options, opens it and returns the dialog object.</td>
</tr>
<tr>
<td>SimpleBsDialog.version</td>
<td>Returns the current SimpleBsDialog's version.</td>
</tr>
</tbody>
</table>
<hr />
</div>
<script type="text/javascript">
$(function () {
$('.source-code').each(function (index) {
var $section = $(this);
var code = $(this).html().replace('<!--', '').replace('-->', '');
// Code preview
var $codePreview = $('<pre class="prettyprint lang-javascript"></pre>');
$codePreview.text(code);
$section.html($codePreview);
// Run code
if ($section.hasClass('runnable')) {
var $button = $('<button class="btn btn-primary">Run the code</button>');
$button.on('click', { code: code }, function (event) {
eval(event.data.code);
});
$button.insertAfter($section);
$('<div class="clearfix" style="margin-bottom: 10px;"></div>').insertAfter($button);
}
});
});
</script>
</body>
</html>
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: '<span class="spinner-border" role="status"></span>',
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('<div class="simple-bs-dialog modal fade' + parseCssClass(dialog.options.cssClass) + '" id="' + dialog.options.id + '" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">' + dialog.options.title + '</h5><button type="button" class="close' + (dialog.options.closable ? '' : ' d-none') + '" data-dismiss="modal">×</button></div><div class="modal-html"><div class="modal-body">' + dialog.options.html + '</div><div class="modal-spinner' + (dialog.options.spinner ? '' : ' d-none') + '">' + dialog.options.spinnerIcon + '</div></div>' + (dialog.options.buttons.length > 0 ? '<div class="modal-footer"></div>' : '') + '</div></div></div>');
// add buttons
$.each(dialog.options.buttons, function(index, options) {
var opts = $.extend({}, {
id: newGuid(),
label: '',
cssClass: '',
action: function(dialogRef){},
}, options);
var button = $('<button type="button" class="btn btn-default' + (opts.cssClass.length > 0 ? ' ' : '') + opts.cssClass + '" id="' + opts.id + '">' + opts.label + '</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
标签：模态,function,插件,bootstrap,height,width,dialog,id,options 来源： https://www.cnblogs.com/zmdComeOn/p/16395014.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。