自制的超好用jQ插件，弹层，模态窗口插件

;(function($) {

$.extend({

//添加背景
modal_bg : function() {
var modalHtml = '<div class="modal-wrap">\n'
+ ' <div class="modal-loadimg">\n'
+ '     <img src="images/gears.gif" alt="">\n'
+ '     <p class="load-text">正在读取数据...</p>\n'
+ ' </div>\n' + '   <div class="modal-bg"></div>\n'
+ '</div>';
$('body').addClass('noscroll').append(modalHtml);
},

//移除modal
modal_remove : function() {
$('.modal-wrap:last').remove();
$('body').removeClass('noscroll');
},

//关闭当前层,传$this,即可
modal_close : function(obj) {
if ($('body').hasClass('noscroll')) {
if ($('.modal-dialog').length > 1) {
obj.closest('.modal-dialog').remove();
} else {
$.modal_remove();
}
}
},

/************************************************************
*
* setting是一个对象，下面是属性介绍，缺省按默认值计算
* setting: {
*     title:          弹层标题，string
*     content:        弹窗内容，string
*     dialogClass:    dialog的ClassName， string
*     width:          dialog的行内style宽度设置，必须带单位(px,em,rem) ，string ，
*     height:         dialog的行内style高度设置，必须带单位(px,em,rem) ，string ，
*     style:          dialog 行内样式设置，如果与width,height冲突，以style为准,string
*     button: [
*         {
*              name:       按钮名称(确认，取消等)，string
*              btnClass：  按钮样式名称，string
*              click：     按钮点击事件的回调, function
*         }
*     ]
* }
*
*************************************************************/

showModal : function(setting) {
if ($('body').hasClass('noscroll')) {
$('.modal-content').hide();
if ($('.tipsbox-confirm').length != 0) {
$('.tipsbox-confirm').remove();
}
} else {
$.modal_bg();
}

var _title = setting.title || '提示',
_content = setting.content || "",
_class = setting.dialogClass || "",
_width = setting.width,
_height = setting.height,
_style = setting.style || ";",
_button = setting.button||[];

var btnsHtml = "";
for (var i = 0, length = _button.length; i < length; i++) {
btnsHtml = btnsHtml
+ '<a href="javascript:void(0)" class="btn dialog-default '+ _button[i].btnClass  + '">' + _button[i].name + '</a>';
}

var dialogHtml = '<div class="modal-dialog dialog-tipsbox '+ _class + '" style="' + 'width:' + _width + ';height:' + _height + ';'+_style + '">'
+ '  <h4 class="modal-title">'
+ '      <i class="fa fa-info-circle"></i>'
+ '      <span class="dialog-title">' + _title + '</span>'
+ '      <span class="modal-close">×</span>'
+ '  </h4>'
+ '  <div class="modal-inner">'
+ '      <div class="dialog-text">' + _content + '</div>'
+ '      <div class="dialog-btn-group">'+ btnsHtml +'</div>\n'
+ '  </div>\n'
+ '</div>';

dialogHtml = $(dialogHtml);

$('.modal-bg:last').before(dialogHtml);

// 判断内容层宽度设置居中
if ((_width != undefined && _width != "") || _style.indexOf("width") != -1) {
_width = dialogHtml.css("width");
var m_left;
switch (_width.replace(/[0-9]/g, "")) {
case "px":
m_left = -Number(_width.slice(0, -2)) / 2 + "px";
dialogHtml.css("margin-left", m_left);
break;
case "em":
m_left = -Number(_width.slice(0, -2)) / 2 + "em";
dialogHtml.css("margin-left", m_left);
break;
case "rem":
m_left = -Number(_width.slice(0, -3)) / 2 + "rem";
dialogHtml.css("margin-left", m_left);
break;
}

}

//判断内容层高度设置居中
if ((_height != undefined && _height != "") || _style.indexOf("height") != -1) {
_height = dialogHtml.css("height");
var m_top;
switch (_height.replace(/[0-9]/g, "")) {
case "px":
m_top = -Number(_height.slice(0, -2)) / 2 + "px";
dialogHtml.css("margin-top", m_top);
break;
case "em":
m_top = -Number(_height.slice(0, -2)) / 2 + "em";
dialogHtml.css("margin-top", m_top);
break;
case "rem":
m_top = -Number(_height.slice(0, -3)) / 2 + "rem";
dialogHtml.css("margin-top", m_top);
break;
}

}

//找到btn数组，即a标签数组，添加事件
var aArray = $(" .dialog-text:contains(" + _content + ")") .siblings(".dialog-btn-group").children();
for (var i = 0, length = aArray.length; i < length; i++) {
$(aArray[i]).click(_button[i].click);
var fn = "" + _button[i].click;
if (fn.indexOf("showModal") == -1) {
$(aArray[i]).click(function() {
$.modal_close($(this));
});
}
}

//使title可以拖动。
var title = dialogHtml.find('.modal-title');
var move = false; //移动标记
var _x,
_y,//鼠标离控件左上角的相对位置
x,
y;//对话框实时的位置
title.mousedown(function(e) {
move = true;
_x = e.pageX - parseInt(dialogHtml.css("left"));
_y = e.pageY - parseInt(dialogHtml.css("top"));
});
$(document).mousemove(function(e) {
if (move) {
x = e.pageX - _x; //控件左上角到屏幕左上角的相对位置
y = e.pageY - _y;
dialogHtml.css({
"top": y,
"left": x
});
}
}).mouseup(function() {
move = false;
});
dialogHtml.find('.dialog-ok').focus();

dialogHtml.find('.modal-close').click(function() {
$.modal_close($(this)); // 传this到function
});
}

})

})(jQuery)

/*  --------------------------------------------------
DIY Modals
-------------------------------------------------- */

/* modal寮瑰眰 */

.noscroll{ overflow:hidden;}

.modal-wrap {
position: fixed;
top: 0;
left: 0;
/*display: none;*/
width: 100%;
height: 100%;
z-index: 100;
}

.modal-loadimg {
position: absolute;
top: 50%;
left: 50%;
width: 160px;
height: auto;
margin: -80px 0 0 -90px;
padding: 15px 10px 10px;
color: #555;
text-align: center;
background: #fff;
/*border: 4px solid #777;*/
border-radius: 10px;
z-index: 102;
}

.modal-loadimg .load-text {
padding-top: 10px;
}

.modal-title {
position: relative;
display: block;
height: 40px;
padding-left: 12px;
line-height: 40px;
font-size: 18px;
font-weight: normal;
color: #855d10;
background: #ffc657;
border-bottom: 1px solid #e8b10d;
}

.modal-content {
position: absolute;
top: 50%;
left: 50%;
/*display: none;*/
width: 558px;
height: 498px;
margin: -250px auto auto -280px;
background: #fff;
border: 1px solid #e8b10d;
-webkit-box-shadow:0 0 10px #222;
-moz-box-shadow:0 0 10px #222;
box-shadow:0 0 10px #222;
z-index: 103;
}

.modal-inner {
padding: 10px;
}

.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: #000;*/
background: rgba(0,0,0,.8);
z-index: 101;
}

.modal-bg-mini {
position: absolute;
top: -1px;
left: -1px;
display: none;
width: 560px;
height: 500px;
/*background: #000;*/
background: rgba(0,0,0,.8);
z-index: 101;
}

.modal-close-hide,
.modal-close-requery,
.modal-close {
position: absolute;
right: 10px;
top: 0;
font-size: 30px;
cursor: pointer;
}

/* modal-dialog */
.modal-dialog {
position: absolute;
top: 50%;
left: 50%;
background: #fff;
border: 1px solid #e8b10d;
-webkit-box-shadow:0 0 10px #222;
-moz-box-shadow:0 0 10px #222;
box-shadow:0 0 10px #222;
z-index: 125;
}

.modal-dialog,dialog-tipsbox {
width: 300px;
margin: -80px 0 0 -151px;
}

.modal-dialog.dialog-confirm {
width: 558px;
margin: -80px 0 0 -280px;
}

.dialog-btn-group,
.dialog-text {
padding: 10px;
line-height: 1.4;
}

.dialog-btn-group {
text-align: right;
}

.dialog-confirm .dialog-btn-group {
text-align: center;
}

.dialog-ok {
/*margin-top: 10px;*/
padding: 6px 16px;
font-size: 16px;
color: #fff;
border-radius: 1px;
background: #ff931e;
}

.dialog-ok:hover {
color: #fff;
background: #ffae00;
}

.dialog-btn2,
.dialog-cancel {
/*margin-top: 10px;*/
padding: 6px 16px;
font-size: 16px;
color: #fff;
border-radius: 1px;
background: #abbbc3;
}

.dialog-btn2:hover,
.dialog-cancel:hover {
color: #fff;
background: #b7c9d2;
}

/* 瀹氭椂3绉掓枃瀛楁牱寮�*/
.return-text {
font-size: 18px;
text-align: center;
}

.return-text .fa {
margin-bottom: 10px;
font-size: 48px;
color: #ffae00;
}

.countdown-time {
font-weight: 600px;
color: red;
}