基于jquery做的一个弹窗效果

Dev|il

浏览: 125216 次
性别:
来自: 成都

最近访客更多访客>>

temfulX

vision_xie

xyzstyle

hvgoei

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端技术

初学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>

效果图: