自制的超好用jQ外掛,彈層,模態視窗外掛
阿新 • • 發佈:2019-02-08
不廢話直接上程式碼
是jqeruy外掛,所以需要先引用jquery。
showMdal.js
;(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)
modal.css
/* --------------------------------------------------
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;
}