用jQuery写了一个模态框插件
大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(～ o ～)~zZ);
"info"框
$("div").confrimModal("<font color=\"green\">成功! </font>", {type:"info", themeColor: "#008B8B"}, true);
"alert"框
$("div").confrimModal("<font color=\"green\">成功! </font>", {type:"alert", themeColor: "green"});
"confrim"框
$("div").confrimModal("确认删除该记录?", {type:"confrim", themeColor: "#0093D5"}, false);
$("div").confrimModal("确认删除该记录?", {type:"confrim", themeColor: "#0093D5"}, true);
code: jquery.beautyDialog.js (使用时将这个引入就可以使用, 方便起见css 并没有抽取出来, 有空再改一改;)
;(function($){
$.fn.extend({
/* booleanFactory: {"key": false}*/
booleanFactory: function(deb){
if (typeof deb == "boolean") {
return {"key": deb};
}else {// 只要参数类型不为 'boolean' 默认返回false;
return {"key": false};
}
},
/* stringFactory: {"key": ""}*/
stringFactory: function(param){
if (typeof param == "string") {
var temp = $.trim(param);// 去掉空格
return {"key": temp};
}else {// 只要参数类型不为 'string' 默认返回"";
return {"key": ""};
}
},
/* optionsFactory: {"key": ""}*/
optionsFactory: function(obj){
if (typeof obj == "object" && !$.isEmptyObject(obj)) {
if (obj.type == undefined || $.isEmptyObject(obj.type)) {// 如果type没有定义或type为空则默认 "alert";
return {"type": "alert", "themeColor": "green"};
} else {// obj.type 不为空
var key = obj.type;
switch (key) {
case "info":
return obj;
break;
case "confrim":
return obj;
break;
case "alert":
return obj;
break;
default:
return {"type": "alert", "themeColor": "green"};
break;
}
}
return obj;
}else {// 只要参数类型不为 'object' 默认返回object;
return {"type": "alert", "themeColor": "green"};
}
},
/* confrimModal 确认模态框组件;*/
confrimModal: function(msg, options, isOpen){
var compnet = "";
var content = this.stringFactory(msg).key;
var obj = this.optionsFactory(options);
if (obj.type == "info") {
compnet = $(
"<div class=\"drag\" style=\"outline: 1px " + obj.themeColor + " solid;background: #FFFFFF; cursor:pointer; box-shadow: 10px 10px 5px #888888; text-align: center;width: 180px; height: auto; margin: 10px; position: fixed;\">"+
"<div style=\"background: " + obj.themeColor + "; color: #FFFFFF; text-align: left; padding: 0 0 2px 5px;\">提示信息"+
"<label title=\"关闭\" id=\"close\" style=\"float: right; background: url('image/close.png') no-repeat;\"> </label>"+
"</div>"+
"<div style=\"padding:5px;background: url('image/pm.gif') no-repeat;background-position:left top;\">"+
"<table style=\"padding:20px 0 0 0; font-size:12px; table-layout: fixed; border: 1px solid " + obj.themeColor + ";text-align: center; width: 100%;word-break: break-all;word-wrap:break-word;\">"+
"<tr><td>" + content + "</td></tr>"+"<tr><td></td></tr>"+
"</table>"+
"</div>"+
"</div>"
);
}
if (obj.type == "confrim") {
compnet = $(
"<div class=\"drag\" style=\"outline: 1px " + obj.themeColor + " solid;background: #FFFFFF; cursor:pointer; box-shadow: 10px 10px 5px #888888; text-align: center;width: 180px; height: auto; margin: 10px; position: fixed;\">"+
"<div style=\"background: " + obj.themeColor + "; color: #FFFFFF; text-align: left; padding: 0 0 2px 5px;\">提示信息"+
"<label title=\"关闭\" id=\"close\" style=\"float: right; background: url('image/close.png') no-repeat;\"> </label>"+
"</div>"+
"<div style=\"padding: 5px;background: url('image/pm.gif') no-repeat;background-position:left top;\">"+
"<table style=\"padding:20px 0 0 0; font-size:12px; table-layout: fixed; border: 1px solid " + obj.themeColor + ";text-align: center; width: 100%;word-break: break-all;word-wrap:break-word;\">"+
"<tr><td>" + content + "</td></tr>"+"<tr><td></td></tr>"+
"</table>"+
"</div>"+
"<div style=\"padding: 0 5px 5px 5px;\">"+
"<input type=\"button\" value=\"确定\" id=\"ok\" style=\"background: " + obj.themeColor + "; color:#FFFFFF; border: 1px solid " + obj.themeColor + "; margin:0 5px 0 0;\">"+
"<input type=\"button\" value=\"取消\" id=\"cancel\" style=\"background: " + obj.themeColor + " ; color:#FFFFFF; border: 1px solid " + obj.themeColor + ";\">"+
"</div>"+
"</div>"
);
}
if (obj.type == "alert") {
compnet = $(
"<div class=\"drag\" style=\"outline: 1px " + obj.themeColor + " solid;background: #FFFFFF; cursor:pointer; box-shadow: 10px 10px 5px #888888; text-align: center;width: 180px; height: auto; margin: 10px; position: fixed;\">"+
"<div style=\"background: " + obj.themeColor + "; color: #FFFFFF; text-align: left; padding: 0 0 2px 5px;\">提示信息"+
"<label title=\"关闭\" id=\"close\" style=\"float: right; background: url('image/close.png') no-repeat;\"> </label>"+
"</div>"+
"<div style=\"padding: 5px;background: url('image/pm.gif') no-repeat;background-position:left top;\">"+
"<table style=\"padding:20px 0 0 0; font-size:12px; table-layout: fixed; border: 1px solid " + obj.themeColor + ";text-align: center; width: 100%;word-break: break-all;word-wrap:break-word;\">"+
"<tr><td>" + content + "</td></tr>"+"<tr><td></td></tr>"+
"</table>"+
"</div>"+
"<div style=\"padding: 0 5px 5px 5px;\">"+
"<input type=\"button\" value=\"确定\" id=\"ok\" style=\"background: " + obj.themeColor + "; color:#FFFFFF; border: 1px solid " + obj.themeColor + "; margin:0 5px 0 0;\">"+
"</div>"+
"</div>"
);
}
$(compnet).css({"top":"200px","left":"500px"});// 初始化显示位置
var move=false;//移动标记
var _x = 0,_y = 0;//鼠标离控件左上角的相对位置, left:0, top:0初始化为左上角, js的局部变量可以不用初始化;
$(compnet).mousedown(function(e){
move=true;
_x=e.pageX - $(compnet).position().left;
_y=e.pageY - $(compnet).position().top;
});
$(compnet).mouseout(function(e){// 当鼠标指针从元素上移开时，发生 mouseout 事件。
if(move){
var x=e.pageX-_x;//控件左上角到屏幕左上角的相对位置
var y=e.pageY-_y;
$(compnet).css({"top":y,"left":x});
/* 拖拽时取消文字选中 start*/
if(window.getSelection){
window.getSelection().removeAllRanges(); //w3c
}else if(document.selection){
document.selection.empty();//IE
}
/* 拖拽时取消文字选中 finish*/
}
}).mouseup(function(){
move=false;
});
// close
var close = compnet.children("div").find("label[id*='close']");
close.on("click", function(){
$(compnet).remove();
});
compnet.find(":button[id='ok']").on("click", function(){
$(compnet).remove();
});
compnet.find(":button[id='cancel']").on("click", function(){
$(compnet).remove();
});
if (this.booleanFactory(isOpen).key) {// 如果设置了confrimModal(true)模式显示坐标信息;
$("body").mousemove(function(e){
compnet.children("div").find("table tr td:eq(1)").html("X axis: " + e.pageX + " | Y axis: " + e.pageY + " <br> width: " + $(".drag").width() + " | height: " + $(".drag").height());
});
}
if (obj.type == "info") {// 如果是'info'类型提示3秒后自动消失;
/* var date = new Date();
compnet.children("div").find("table tr td:eq(1)").html(date);
setTimeout(function(){compnet.hide();}, 1000*3); */
var i = 5;
var intervalid;
intervalid = setInterval(function(){
if (i == 1) {
//window.location.href = "../index.html";
window.location.reload();
clearInterval(intervalid);
}
compnet.children("div").find("table tr td:eq(1)").html("<font style=\"color:#FF0000;\">" + i + "</font> 秒后自动消失!");
i--;
}, 1000);
}
return $(this).append(compnet);// 返回组件对象, 可以继续使用jQuery的链式操作;
}
});
})(jQuery);
OK, 大功告成!
浙公网安备 33010602011771号