基于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 += "
" + title + "
"
	        messageBoxDiv += "
";
	        messageBoxDiv += "
";
	        messageBoxDiv += "
";
	        messageBoxDiv += "
";
	        if (icon) {
	            messageBoxDiv += "";
	        }
	        messageBoxDiv += "
";
	        messageBoxDiv += "
" + msg + "
";
	        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]

效果图:

• 
• 大小: 12 KB

• MessageBox.rar (36.6 KB)
• 描述: dome下载
• 下载次数: 40

• 查看图片附件