<div class="blogpost-body" id="cnblogs_post_body">
<div class="cnblogs_Highlighter">
<pre class="blockcode"><code class="language-javascript">/**
* 弹出框组件
*/
(function($) {
var Utils = {
showMask: function() {
var $mask = $("#mask");
if( $mask.length === 0 ) {
$('body').prepend("<div id='mask' class='mask'></div>");
}
$("#mask").css({
width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
}).show();
},
setPosition: function(elem, options) {
var defaults = {target: null, offset: {left: 0, top: 0}, container: $(document.body), position: "bottom"},
opts = $.extend({}, defaults, options),
left, top;
if (null !== opts.target) {
var offset = opts.target.offset(),
position = opts.position;
if (position === "left") {
left = offset.left - elem.width();
top = offset.top;
} else if (position === "right") {
left = offset.left + opts.target.outerWidth();
top = offset.top;
} else if (position === "top") {
left = offset.left;
top = offset.top - elem.height();
} else {
left = offset.left;
top = offset.top + opts.target.outerHeight();
}
left += opts.offset.left;
top += opts.offset.top;
} else {
var cwidth = document.documentElement.clientWidth,
cheight = document.documentElement.clientHeight,
width = elem.width(),
height = elem.height();
left = Math.max(0, (cwidth - width)/2) + document.documentElement.scrollLeft + document.body.scrollLeft;
top = Math.max(0, (cheight - height)/2) + document.documentElement.scrollTop + document.body.scrollTop;
}
elem.css({
position: 'absolute',
zIndex: '101'
});
elem.offset({
left : left,
top : top
})
},
hideMask: function() {
$("#mask").hide();
}
}
/** dialog 全局静态变量定义 */
var MASK_HOLD = "mask_hold";
// 默认值
var defaults = {
// dialog ID
id: 'labi-dialog',
// 标题文字
title: "",
// 关闭按钮文字
closeText: '关闭',
// 内容区域
content: '',
height: 'auto',
width: 300,
maxHeight: false,
maxWidth: false,
minHeight: 150,
minWidth: 150,
position: 'center',
zIndex: 100,
// dialog样式 宽高在该class中设定
dialogClass: '',
// 是否可拖拽
draggable: true,
// 是否显示蒙板
showMask: true,
// 操作按钮
// key为buttonValue value为fn
buttons: {},
// 按钮引导类型
btnTypes: false,
//按钮样式
btnClassName:"t-r",
//按钮顶部虚线
btnHasDashed : true,
// 其它button面板元素
otherButtonPaneElem: false,
// 用来定位的目标对象
target: null,
// 是否需要点击dialog外部自动关闭
autoClose: false,
// dialog的容器 默认为body
container: false,
// 关闭dialog时的回调
closeDialogCallback: false,
// 是否显示关闭按钮
showCloseButton: true,
// 关闭窗口的时阻止的选项设置 传入要执行的方法
stopCloseDialog:false,
// 是否返回dialog实例 默认返回dialog DOM对象
returnInstance: false,
contentClass: "",
// 是否显示顶部提示
topRemaind : false,
// 是否显示顶部提示
topRemaindHeightNumber : 1,
//顶部提示内容
topRemaindContainer : ""
};
/**
* 弹出窗构造方法
* @description 样式改版
* @param options
* @return dialogDom 返回实例对象 链式调用
*/
function Dialog(opts){
this.selfId = opts.id;
this.dialogDom = $("#" + opts.id);
this.options = opts;
this.btnMap = {};
this._init();
return this.options.returnInstance ? this : this.dialogDom;
}
/**
* 弹出框实例原型扩展方法
*/
$.extend(Dialog.prototype, {
/**
* 弹出框实例初始化方法
*/
_init : function(){
var self = this;
self._createDialog();
self._instanceEvent();
},
/**
* 创建实例DOM
*/
_createDialog : fu |
|
转播
