基于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("<div class="messageObody"></div>"); 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 = "<div class="messageBox">"; messageBoxDiv += "<div class="messageBox-top ">"; messageBoxDiv += "<div class="messageBox-top-title messageBox-bg">" + title + "</div>" messageBoxDiv += "<div class="messageBox-top-close messageBox-bg" onclick="MessageBox.cancle();"><img src="" + this.baseUrl + "img/cancel.png" /></div>"; messageBoxDiv += "</div>"; messageBoxDiv += "<div class="messageBox-content">"; messageBoxDiv += "<div class="messageBox-context-img">"; if (icon) { messageBoxDiv += "<img src="" + icon + ""/>"; } messageBoxDiv += "</div>"; messageBoxDiv += "<div class="messageBox-context-msg">" + msg + "</div>"; messageBoxDiv += "</div>" messageBoxDiv += "<div class="messageBox-button">"; messageBoxDiv += "[list]"; if (btn == "YESORNO") { messageBoxDiv += "[*]<a href="javascript:MessageBox.cancle();" class="button messageBox-bg"><img src="" + this.baseUrl + "img/cancel.png" />取消</a>" } messageBoxDiv += "[*]<a href="javascript:MessageBox.deter();" class="button messageBox-bg"><img src="" + this.baseUrl + "img/ok.png" />确定</a>" messageBoxDiv += "[/list]"; messageBoxDiv += "</div>"; 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 = "<div class="maskDiv"></div>"; 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(); } }})();<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script type="text/javascript" src="jquery-1.4.3.min.js"></script><script type="text/javascript" src="MessageBox.js"></script><link href="MessageBox.css" type="text/css" rel="stylesheet" /></head><body >[url=javascript:test()]confirm[/url][url=javascript:MessageBox.alert('提示', 'aa',null, MessageBox.WARNING)]alert[/url]<script type="text/javascript"> function test(){ MessageBox.confirm('消息', "提示,请登录后在操作!", function(btn){ if(btn){ // alert('你点了是'); }else{ // alert('你点了否'); }}, MessageBox.ERROR); }</script></body></html>