/**
自己写的alert和confirm弹出框。用法很简单,直接调用插件对象传人参数ok,
注意的是自己无聊将插件升级为用户自定义,完全根据用户审美自定义颜色,再就是有一个全局颜色随机机制,如果您不是重口味,建议您不要开启,
自动机制也可以用于调试自己喜欢颜色,然后取到配色方案再关闭全局自动,附上自己找到配色并赋值
eg:$.msgbox({type:"confirm",speed:200,title:"",msg:"",opacity:'',callback:function(){}.....})
**/
; (function ($) {
$.msgbox = function (options) {
$.msgbox.defaults = {
is_changebg: true, //默认显示遮罩层
title: '提示信息', //头部
msg: '至少来点内容吧!', //内容
okbtntext: '确定',
nobtntext: '取消',
opacity: .5, //遮罩层透明度
filter: "alpha(opacity=50)",
bgcolor: '#000', //遮罩层颜色
type: '', //调用类型(必须填写)
userdesign: false, //用户自定义(默认false)
bordercolor: "#ffae00", //title下边框颜色(只针对自定义下有效)
titlebg: "#ddd", //title背景颜色(只针对自定义下有效)
contentbg: "#fff", //内容背景(只针对自定义下有效)
dashcolor: "#ffae00", //虚线颜色(只针对自定义下有效)
btnbg: "#ffae00", //按钮颜色(只针对自定义下有效)
iconhoverbg: "red", //关闭按钮放上去颜色(只针对自定义下有效)
allcolorauto: false, //是否启用全局颜色随机产生,启用后自定义的颜色将实效(只针对自定义下有效)
callback: function () { }, //声明回调函数
nocallback: function () { }
};
var opts = $.extend(true, $.msgbox.defaults, options);
if (!!opts.userdesign && opts.userdesign == !0) {
if (!!opts.allcolorauto && opts.allcolorauto == !0) {
var btnbg = '#' + (math.random() * 0xffffff << 0).tostring(16);
var bordercolor = '#' + (math.random() * 0xffffff << 0).tostring(16);
var titlebg = '#ddd' //不敢随机,影响食欲
var contentbg = '#fff'; //不敢随机,影响食欲
var dashcolor = '#' + (math.random() * 0xffffff << 0).tostring(16);
var iconhoverbg = '#' + (math.random() * 0xffffff << 0).tostring(16);
} else {
var btnbg = opts.btnbg;
var bordercolor = opts.bordercolor;
var titlebg = opts.titlebg;
var contentbg = opts.contentbg;
var dashcolor = opts.dashcolor;
var iconhoverbg = opts.iconhoverbg;
}
} else {
var bordercolor = "#009bfe";
var titlebg = "#ddd";
var contentbg = "#fff";
var dashcolor = "#ddd";
var btnbg = "#168bbb";
var iconhoverbg = "red";
}
(function (opts) {
switch (opts.type) { //检查用户传进来的类型,目前只开发到alert,confirm两种
case "alert":
pagerender("alert", opts.title, opts.msg);
btnok(opts.callback);
btnno();
break;
case "confirm":
pagerender("confirm", opts.title, opts.msg);
btnok(opts.callback);
btnno(opts.nocallback);
break;
default:
pagerender("alert", '消息', "暂时未开发其他功能,请持续关注leon.z插件库");
btnok();
btnno();
break;
}
})(opts);
function pagerender(type, title, msg) { /** 渲染页面**/
var html = "";
html += '
';
//必须先将html添加到body,再设置css样式
$("body").append(html);
rendercss(); //渲染样式
};
function rendercss() {
var msgbox = document.body.clientwidth > 400 ? 400 : document.body.clientwidth - 10;
if (opts.is_changebg == !0) {
$("#msg_box").css({
width: '100%',
height: '100%',
zindex: '99999',
position: 'fixed',
backgroundcolor: opts.bgcolor,
top: '0',
left: '0',
opacity: opts.opacity,
filter: opts.filter
});
} else {
$("#msg_con").css({
border: "1px solid " + bordercolor,
boxshadow: "0px 2px 0px " + bordercolor
});
}
$("#msg_con").css({
zindex: '999999',
width: msgbox + 'px',
position: 'fixed',
backgroundcolor: contentbg,
borderradius: '15px',
cursor: 'pointer'
});
$("#msg_tit").css({
display: 'block',
fontsize: '14px',
color: '#444',
padding: '10px 15px',
backgroundcolor: titlebg,
borderradius: '15px 15px 0 0',
borderbottom: '3px solid ' + bordercolor,
fontweight: 'bold'
});
$("#msg_msg").css({
padding: '20px',
lineheight: '20px',
borderbottom: '1px dashed ' + dashcolor,
fontsize: '13px'
});
$("#msg_ico").css({
display: 'block',
position: 'absolute',
right: '10px',
top: '9px',
border: '1px solid gray',
width: '18px',
height: '18px',
textalign: 'center',
lineheight: '15px',
cursor: 'pointer',
borderradius: '12px',
fontfamily: '微软雅黑'
});
$("#msg_btnbox").css({
margin: '15px 0 10px 0',
textalign: 'center'
});
$("#msg_btn_ok,#msg_btn_no").css({
width: '85px',
height: '30px',
color: 'white',
border: 'none',
cursor: 'pointer'
});
$("#msg_btn_ok").css({
backgroundcolor: btnbg
});
$("#msg_btn_no").css({
backgroundcolor: 'gray',
marginleft: '20px'
});
//右上角关闭按钮hover样式
$("#msg_ico").hover(function () {
var hoverclass = {
"transition-property": "all",
"transition-duration": "0.3s",
"transition-timing-function": "ease-in",
"transition-delay": "0.05s",
"backgroundcolor": iconhoverbg,
"color": "white"
}
if (window.applicationcache) { //是否支持html5 transition属性
$(this).css(hoverclass || {});
} else {
$(this).css({
backgroundcolor: iconhoverbg,
color: 'white'
});
}
}, function () {
$(this).css({
backgroundcolor: titlebg,
color: 'black'
});
});
var _widht = window.screen.clientwidth || document.documentelement.clientwidth; //屏幕宽
var _height = window.screen.clientheight || document.documentelement.clientheight; //屏幕高
var msgboxidth = $("#msg_con").width();
var boxheight = $("#msg_con").height() + 100;
//让提示框居中
$("#msg_con").css({
top: (_height - boxheight) / 2 + "px",
left: (_widht - msgboxidth) / 2 + "px"
});
}
//确定按钮事件
function btnok(callback) {
$("#msg_btn_ok").click(function () {
$("#msg_box,#msg_con").remove();
if (typeof (callback) == 'function') {
callback();
}
});
}
//取消按钮事件
function btnno(nocallback) {
$("#msg_btn_no,#msg_ico").click(function () {
$("#msg_box,#msg_con").remove();
if (typeof (nocallback) == 'function') {
nocallback();
}
});
}
}
})(jquery);
//function checkdata($form) {
// var data = {};
// var ispass = true;
// $form.find('input').each(function () {
// var $this = $(this);
// var name = $this.attr('name'), value = $this.val(),
// type = $this.attr('datatype'), nullmsg = $this.attr('nullmsg'),
// errormsg = $this.attr('errormsg');
// if (name == undefined || name == '') return true;
// if (value == '') {
// alertmsg(nullmsg);
// $this.focus();
// ispass = false;
// return false;
// } else if (type == 'e' && !(/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value))) {
// alertmsg(errormsg);
// $this.focus();
// ispass = false;
// return false;
// } else {
// data[name] = $this.val();
// }
// });
// function alertmsg(msg) {
// $.msgbox({ type: "alert", speed: 200, userdesign: true, bordercolor: "red", btnbg: "#e84200", msg: msg });
// }
// if (ispass) {
// data["token"] = $('#token').val();
// submitdata();
// }
//}