感谢
的https://github.com/nakupanda/bootstrap3-dialog根据需要弹出窗体,但是可以移动,不遮挡下面的内容,所以就修改了源代码,添加了一个属性:dataBackdrop,如果为false,则不生成遮罩。同时添加了缩小按钮
var dialogId = 'eventModal';
var dialog = new BootstrapDialog({
id: dialogId,
title: obj.EVENTNAME,
message: detailHtml,
draggable: true,
dataBackdrop: false,
closeByBackdrop: false,
closeByKeyboard: false,
buttons: [
{
label: '关闭',
cssClass: 'btn-link',
action: function () {
}
}
]
});
dialog.open();
效果图:
缩小
css代码:
/***************************************************************************
bootstrap dialog样式
***************************************************************************/
.modal-header .minimize {
margin-top: -2px;
margin-right: 10px;
}
button.minimize {
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: 0 0;
border: 0;
}
.minimize {
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.minimize:focus, .minimize:hover {
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}
/*bootstrap弹出框样式*/
.bootstrap-dialog {
}
.bootstrap-dialog .modal-header {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.bootstrap-dialog .bootstrap-dialog-title {
color: #fff;
display: inline-block;
font-size: 16px;
}
.bootstrap-dialog .bootstrap-dialog-message {
font-size: 14px;
}
.bootstrap-dialog .bootstrap-dialog-button-icon {
margin-right: 3px;
}
.bootstrap-dialog .bootstrap-dialog-close-button {
font-size: 20px;
float: right;
filter: alpha(opacity=90);
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
.bootstrap-dialog .bootstrap-dialog-close-button:hover {
cursor: pointer;
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.bootstrap-dialog .bootstrap-dialog-minimize-button {
font-size: 20px;
float: right;
filter: alpha(opacity=90);
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
.bootstrap-dialog .bootstrap-dialog-minimize-button:hover {
cursor: pointer;
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.bootstrap-dialog.type-default .modal-header {
background-color: #fff;
}
.bootstrap-dialog.type-default .bootstrap-dialog-title {
color: #333;
}
.bootstrap-dialog.type-info .modal-header {
background-color: #5bc0de;
}
.bootstrap-dialog.type-primary .modal-header {
background-color: #428bca;
}
.bootstrap-dialog.type-success .modal-header {
background-color: #5cb85c;
}
.bootstrap-dialog.type-warning .modal-header {
background-color: #f0ad4e;
}
.bootstrap-dialog.type-danger .modal-header {
background-color: #d9534f;
}
.bootstrap-dialog.size-large .bootstrap-dialog-title {
font-size: 24px;
}
.bootstrap-dialog.size-large .bootstrap-dialog-close-button {
font-size: 30px;
}
.bootstrap-dialog.size-large .bootstrap-dialog-message {
font-size: 18px;
}
.bootstrap-dialog .icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
.modal {
bottom: auto;
display: none;
left: 380px;
outline: 0 none;
overflow: hidden;
position: fixed;
right: auto;
top: 50px;
z-index: 1050;
width: auto;
height: auto;
}
js代码:
/* global define */
/* ================================================
* Make use of Bootstrap's modal more monkey-friendly.
*
* For Bootstrap 3.
*
* javanoob@hotmail.com
*
* https://github.com/nakupanda/bootstrap3-dialog
*
* Licensed under The MIT License.
* ================================================ */
(function (root, factory) {
"use strict";
// CommonJS module is defined
if (typeof module !== 'undefined' && module.exports) {
module.exports = factory(require('jquery'), require('bootstrap'));
}
// AMD module is defined
else if (typeof define === "function" && define.amd) {
define("bootstrap-dialog", ["jquery", "bootstrap"], function ($) {
return factory($);
});
} else {
// planted over the root!
root.BootstrapDialog = factory(root.jQuery);
}
}(this, function ($) {
"use strict";
/* ================================================
* Definition of BootstrapDialogModal.
* Extend Bootstrap Modal and override some functions.
* BootstrapDialogModal === Modified Modal.
* ================================================ */
var Modal = $.fn.modal.Constructor;
var BootstrapDialogModal = function (element, options) {
Modal.call(this, element, options);
};
BootstrapDialogModal.getModalVersion = function () {
var version = null;
if (typeof $.fn.modal.Constructor.VERSION === 'undefined') {
version = 'v3.1';
} else if (/3\.2\.\d+/.test($.fn.modal.Constructor.VERSION)) {
version = 'v3.2';
} else if (/3\.3\.[1,2]/.test($.fn.modal.Constructor.VERSION)) {
version = 'v3.3'; // v3.3.1, v3.3.2
} else {
version = 'v3.3.4';
}
return version;
};
BootstrapDialogModal.ORIGINAL_BODY_PADDING = parseInt(($('body').css('padding-right') || 0), 10);
BootstrapDialogModal.METHODS_TO_OVERRIDE = {};
BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.1'] = {};
BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.2'] = {
hide: function (e) {
if (e) {
e.preventDefault();
}
e = $.Event('hide.bs.modal');
this.$element.trigger(e);
if (!this.isShown || e.isDefaultPrevented()) {
return;
}
this.isShown = false;
// Remove css class 'modal-open' when the last opened dialog is closing.
var openedDialogs = this.getGlobalOpenedDialogs();
if (openedDialogs.length === 0) {
this.$body.removeClass('modal-open');
}
this.resetScrollbar();
this.escape();
$(document).off('focusin.bs.modal');
this.$element
.removeClass('in')
.attr('aria-hidden', true)
.off('click.dismiss.bs.modal');
$.support.transition && this.$element.hasClass('fade') ?
this.$element
.one('bsTransitionEnd', $.proxy(this.hideModal, this))
.emulateTransitionEnd(300) :
this.hideModal();
}
};
BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3'] = {
/**
* Overrided.
*
* @returns {undefined}
*/
setScrollbar: function () {
var bodyPad = BootstrapDialogModal.ORIGINAL_BODY_PADDING;
if (this.bodyIsOverflowing) {
this.$body.css('padding-right', bodyPad + this.scrollbarWidth);
}
},
/**
* Overrided.
*
* @returns {undefined}
*/
resetScrollbar: function () {
var openedDialogs = this.getGlobalOpenedDialogs();
if (openedDialogs.length === 0) {
this.$body.css('padding-right', BootstrapDialogModal.ORIGINAL_BODY_PADDING);
}
},
/**
* Overrided.
*
* @returns {undefined}
*/
hideModal: function () {
this.$element.hide();
this.backdrop($.proxy(function () {
var openedDialogs = this.getGlobalOpenedDialogs();
if (openedDialogs.length === 0) {
this.$body.removeClass('modal-open');
}
this.resetAdjustments();
this.resetScrollbar();
this.$element.trigger('hidden.bs.modal');
}, this));
}
};
BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3.4'] = $.extend({}, BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3']);
BootstrapDialogModal.prototype = {
constructor: BootstrapDialogModal,
/**
* New function, to get the dialogs that opened by BootstrapDialog.
*