基于jquery做的一个弹窗效果
初学javascript，就想动手重写下alter和confirm，自带的真的太丑了,刚看了javascript oo写法,就想着模仿一下,直接上代码
//消息对话框
var MessageBox = (function () {
var
Msg = {
baseUrl: "",
//初始化函数
init: function () {
this.omask = null;
this.messageBox = null;
this.callback = null;
this.frame = null;
this.clientWidth = $(window).width();
this.clientHeight = $(window).height();
this.offsetWidth = $(document).width();
this.offsetHeight = $(document).height();
if($.browser.msie){ //判断ie
this.offsetWidth -= 4;
this.offsetHeight -= 4;
}
$("body").append("");
this.obody = $(".messageObody");
this.obody.width(this.offsetWidth);
this.obody.height(this.offsetHeight);
},
//创建对话框
createMessageBox: function (title, msg, btn, icon) {
if (!title) title = "消息";
if (!msg) msg = "";
var messageBoxDiv = "";
messageBoxDiv += "";
messageBoxDiv += ""
messageBoxDiv += "![](\"")
";
messageBoxDiv += "";
messageBoxDiv += "";
messageBoxDiv += "";
if (icon) {
messageBoxDiv += "";
}
messageBoxDiv += "";
messageBoxDiv += "";
messageBoxDiv += ""
messageBoxDiv += "";
messageBoxDiv += "[list]";
if (btn == "YESORNO") {
messageBoxDiv += "[*]取消
"
}
messageBoxDiv += "[*]确定
"
messageBoxDiv += "[/list]";
messageBoxDiv += "";
this.obody.append(messageBoxDiv);
this.messageBox = $(".messageBox");
this.frame = $(".messageBox-top-title");
this.messageBox.css("left", Math.ceil((this.clientWidth - this.messageBox.width()) / 2) + "px");
this.messageBox.css("top", Math.ceil((this.clientHeight - this.messageBox.height()) / 2) + "px");
//鼠标按下事件
this.frame.bind("mousedown", function(){
var point = { x: event.clientX, y: event.clientY };
if (Msg.frame.setCapture) { //防止ie下拖动过快丢失对象
Msg.frame.setCapture();
} else if (window.captureEvents) {
window.captureEvents(event.MOUSEMOVE | event.MOUSEUP);
}
$(document).bind("mousemove", function(){
var
left = Msg.messageBox.css("left"),
top = Msg.messageBox.css("top"),
width = $(document).width(),
height = $(document).height();
left = left.substring(0, left.length - 2);
top = top.substring(0, top.length - 2);
left = event.clientX - point.x + parseInt(left);
top = event.clientY - point.y + parseInt(top);
//超出窗口边界
if(left < 0) left = 0;
else if(left + Msg.messageBox.width() > width)left = width - Msg.messageBox.width() - 1;
if(top < 0) top = 0;
else if(top + Msg.messageBox.height() > height) top = height - Msg.messageBox.height() - 1;
Msg.messageBox.css("left", left + "px");
Msg.messageBox.css("top", top + "px");
point = { x: event.clientX, y: event.clientY };
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //取消选择文本,好像没什么用
});
return false; //返回flase就可以使chorme下 鼠标：move样式丢失
});
//鼠标弹出
$(document).bind("mouseup", function(){
if (Msg.frame.releaseCapture) {
Msg.frame.releaseCapture();
} else if (window.captureEvents) {
window.captureEvents(event.MOUSEMOVE | event.MOUSEUP);
}
$(document).unbind("mousemove");
});
//绑定窗口大小改变事件
$(window).bind("resize", function(){
//没跟新函数里面的值
var
width = $(document).width(),
height = $(window).height();
Msg.omask.width(width);
Msg.omask.height($(document).height());
Msg.messageBox.css("left", Math.ceil((width - Msg.messageBox.width()) / 2) + "px");
Msg.messageBox.css("top", Math.ceil((height - Msg.messageBox.height()) / 2) + "px");
});
},
//带确认按钮的对话框
//title: 标题
//msg: 正文消息
//callback: 关闭文本框后的回调函数
//isModel: 是否有遮罩层 true非模态
alert: function (title, msg, callback, icon, isModel) {
if (!isModel) {
this.mask(); //弹出遮罩
}
this.createMessageBox(title, msg, "YES", icon);
this.callback = callback;
},
//带是和否的对话框
confirm: function (title, msg, callback, icon, isModel) {
if (!isModel) {
this.mask();
}
this.createMessageBox(title, msg, "YESORNO", icon);
this.callback = callback;
},
//隐藏对话框
hide: function () {
if (this.mask) {
this.omask.hide();
}
this.messageBox.hide();
},
//显示隐藏对话框
show: function () {
if (this.omask) {
this.omask.show();
}
this.messageBox.show();
},
//销毁对话框
destory: function (callback) {
$(window).unbind("resize"); //取消窗口大小改变事件
this.obody.remove();
/*this.messageBox.unbind();
if (this.omask) {
this.omask.remove();
}
this.messageBox.remove();*/
},
deter: function () {
this.destory();
if (this.callback) {
this.callback(true);
}
},
cancle: function () {
this.destory();
if (this.callback) {
this.callback(false);
}
},
//遮罩
mask: function () {
var maskDiv = "";
this.obody.append(maskDiv);
this.omask = $(".maskDiv");
this.omask.width(this.offsetWidth);
this.omask.height(this.offsetHeight);
}
};
return {
//错误图标
ERROR: Msg.baseUrl + "img/icon-error.gif",
//信息图标
INFO: Msg.baseUrl + "img/icon-info.gif",
//疑问图标
QUESTION: Msg.baseUrl + "img/icon-question.gif",
//提醒图标
WARNING: Msg.baseUrl + "img/icon-warning.gif",
alert: function (title, msg, callback, icon, isModel) {
Msg.init();
Msg.alert(title, msg, callback, icon);
},
confirm: function (title, msg, callback, icon, isModel) {
Msg.init();
Msg.confirm(title, msg, callback, icon, isModel);
},
deter: function () {
Msg.deter();
},
//取消按钮
cancle: function () {
Msg.cancle();
}
}
})();
用法:
无标题文档
[url=javascript:test()]confirm[/url]
[url=javascript:MessageBox.alert('提示', 'aa',null, MessageBox.WARNING)]alert[/url]
效果图:
[img]http://dl.iteye.com/upload/attachment/0063/5343/41c58390-8452-3361-b15e-fef49d18fd73.jpg[/img]