弹出样式封装

来源：互联网发布：乐高软件中文版编辑：程序博客网时间：2024/05/16 10:27

/**
*弹出样式封装
*msg 内容
*megledge, 文本内容字体样式等级 4-红 > 3 -蓝 > 2 -黄 > 1 -绿 > 0 - 默认：黑
*po:添加位置
* * eg 1=》 window.zdpopup(mssage，'1','po')
*/

(function($) {
$.Popups = {
popup:function(msg,megledge,po){
if( !msg || msg == null ) msg = '系统出现错误';
if(!megledge || megledge == null) megledge ='0';
$.Popups._show(msg, megledge,po);
},
_show: function(msg,megledge,po){
$.Popups._hide();
var _html = "";
_html += '<div class="popover bottom" id="popover">'
_html += '<div class="arrow">';
_html += '</div>';
_html += '<h3 class="popover-title"></h3>';
switch(megledge){
case '0':
_html += '<div class="popover-content text-black ">'
break;
case '1':
_html += '<div class="popover-content text-red">'
break;
case '2':
_html += '<div class="popover-content text-blue">'
break;
case '3':
_html += '<div class="popover-content text-yellow">'
break;
case '4':
_html += '<div class="popover-content text-green">'
break;
}
_html += '';
_html += msg;
_html += '</div> </div>';

//必须先将_html添加到body，再设置Css样式
$(po).append(_html);
GenerateCss();
},

_hide: function() {
$("#popover").remove();
}
}

// Shortuct functions
zdpopup = function(msg,megledge,po) {
$.Popups.popup(msg,megledge,po);
}

var GenerateCss = function(){
//$(".open>.popover").css({display:'block !important'});
$(".popover").css({marginTop: '10px',display:'none',left: 'auto',
top:'auto'});
$(".arrow").css({left: '20px'});
$(".popover-title").css({display: 'none'});
}

})(jQuery);

/**
* 弹窗样式重写
* title, 标题 ,''=>空（没有标题），'标题内容'
* msg, 内容
* msgAlign,内容分布 left：左 center：局中 right：右
* megledge, 文本内容字体样式等级 4-红 > 3 -蓝 > 2 -黄 > 1 -绿 > 0 - 默认：黑
* btntext, 确定按钮文本
* btncancel,取消按钮文本
* callback，回调函数
* eg 1=》 window.parent.zdalert('title',mssage,''，'','',function(){})
* eg 2=》 window.parent.zdconfirm('',mssage,'','ok','cancel',function(r){
* if(r)
* {
* // 判断毁掉函数的判断处理
* //window.location.href=""
* }
* })
// }
*/

(function($) {
$.alerts = {
alert: function(title, message,msgAlign,megledge,btntext,callback) {
if( !title || title == null ) title = '';
if(btntext == null) btntext = '确定';
if(!msgAlign|| msgAlign == null) msgAlign ='left';
if(!megledge || megledge == null) megledge ='0';

//console.log(megledge);
$.alerts._show(title, message,msgAlign,megledge, null, 'alert',btntext ,null,function(result) {
if( callback ) callback(result);
});
},

confirm: function(title, message,msgAlign,megledge,btntext,btncancel,callback) {

if(!title || title == null ) title = '';
if(btntext == null) btntext = '确定';
if(btncancel == null) btncancel = '取消';
if(!msgAlign|| msgAlign == null) msgAlign ='left';
if(!megledge || megledge == null) megledge ='0';
// console.log(title,megledge)
$.alerts._show(title, message, msgAlign,megledge,null, 'confirm',btntext,btncancel, function(result) {
if( callback ) callback(result);
});
},


_show: function(title, msg,msgAlign, megledge,value, type, btntext,btncancel,callback) {
var _html = "";
_html += '<div id="mb_box"></div>';
_html += '<div id="mb_con" style="background:#fff;" >';
_html += '<button id="mb_remove" type="button" class="btn btn-box-tool pull-right"><i class="fa fa-times"></i></button>'
if(title){
_html += '<span id="mb_tit">' + title + '</span>';
}
switch(megledge){
case '0':
_html += '<div id="mb_msg">'
break;
case '1':
_html += '<div id="mb_msg" class="text-red">'
break;
case '2':
_html += '<div id="mb_msg" class="text-blue">'
break;
case '3':
_html += '<div id="mb_msg" class="text-yellow">'
break;
case '4':
_html += '<div id="mb_msg" class="text-green">'
break;
}

switch(msgAlign){
case 'left':
_html += '<div class="alignLeft">'
break;
case 'right':
_html += '<div class="alignRight">'
break;
case 'center':
_html += '<div class="alignCenter">'
break;
}
_html += msg + '</div><div id="mb_btnbox">';

if (type == "alert") {
_html += '<input id="mb_btn_ok" class="btn btn-primary" type="button" value="'+btntext+'" />';
}

if (type == "confirm") {
_html += '<input id="mb_btn_ok" class="btn btn-primary" type="button" style="margin-right: 30px;" value="'+btntext+'" />';
_html += '<input id="mb_btn_no" class="btn btn-primary" type="button" value="'+btncancel+'" />';
}
_html += '</div></div>';

//必须先将_html添加到body，再设置Css样式
$("body").append(_html);
GenerateCss();

switch( type ) {
case 'alert':
$("#mb_btn_ok").click( function() {
$.alerts._hide();
callback(true);
});
$("#mb_btn_ok").focus().keypress( function(e) {
if( e.keyCode == 13 || e.keyCode == 27 ) $("#mb_btn_ok").trigger('click');
});

$("#mb_remove").click( function() {
$.alerts._hide();
});

break;
case 'confirm':

$("#mb_btn_ok").click( function() {
$.alerts._hide();
if( callback ) callback(true);
});
$("#mb_btn_no").click( function() {
$.alerts._hide();
if( callback ) callback(false);
});
$("#mb_btn_no").focus();
$("#mb_btn_ok, #mb_btn_no").keypress( function(e) {
if( e.keyCode == 13 ) $("#mb_btn_ok").trigger('click');
if( e.keyCode == 27 ) $("#mb_btn_no").trigger('click');
});

$("#mb_remove").click( function() {
$.alerts._hide();
});
break;


}
},
_hide: function() {
$("#mb_box,#mb_con").remove();
}
}
// Shortuct functions
zdalert = function(title, message,msgAlign,megledge,btntext,callback) {
$.alerts.alert(title, message,msgAlign,megledge,btntext,callback);
}

zdconfirm = function(title, message,msgAlign,megledge, btntext, btncancel,callback) {
$.alerts.confirm(title, message,msgAlign,megledge, btntext, btncancel,callback);
};

//生成Css
var GenerateCss = function () {

$("#mb_box").css({ width: '100%', height: '100%', zIndex: '99999', position: 'fixed',
filter: 'Alpha(opacity=60)', backgroundColor: 'black', top: '0', left: '0', opacity: '0.6',

});

$("#mb_con").css({ zIndex: '999999', width: '34%', position: 'fixed',
borderRadius: '5px', margin:'0 10px',padding:' 0 10px',
borderBottom: '1px solid rgb(222, 222, 222)'
});

$("#mb_tit").css({ display: 'block', fontSize: '18px', padding: '10px 15px',
borderRadius: '5px 5px 0 0', textAlign:'center', color:'#000',fontWeight:'500',
fontFamily:'微软雅黑',letterSpacing:'2px',borderBottom: '1px solid #dedede',
});

$("#mb_msg").css({ padding: '20px', lineHeight: '20px',
fontSize: '14px'
});

$("#mb_ico").css({ display: 'block', position: 'absolute', right: '10px', top: '9px',
border: '1px solid Gray', width: '18px', height: '18px', textAlign: 'center',
lineHeight: '16px', cursor: 'pointer', borderRadius: '3px', fontFamily: '微软雅黑'
});

$("#mb_btnbox").css({ margin: '15px', textAlign: 'center' });
$("#mb_btn_ok,#mb_btn_no").css({ Padding: '2px 26px', borderRadius: '5px', letterSpacing:'4px', height: '30px', color: 'white', border: 'none' });

$(".alignLeft").css({textAlign: 'left' });
$(".alignRight").css({textAlign: 'right' });
$(".alignCenter").css({textAlign: 'center' });
/*$("#mb_btn_ok").css({ backgroundColor: '#168bbb' });
$("#mb_btn_no").css({ backgroundColor: 'gray', marginLeft: '20px' });
*/


//右上角关闭按钮hover样式
$("#mb_ico").hover(function () {
$(this).css({ backgroundColor: 'Red', color: 'White' });
}, function () {
$(this).css({ backgroundColor: '#DDD', color: 'black' });
});

var _widht = document.documentElement.clientWidth; //屏幕宽
var _height = document.documentElement.clientHeight; //屏幕高

var boxWidth = $("#mb_con").width();
var boxHeight = $("#mb_con").height();

//让提示框居中
$("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });
}
})(jQuery);

0 0