初学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>
效果图:
- 大小: 12 KB
分享到:
相关推荐
* Msbox是一个超轻量级的弹出提示窗口Jquery插件,基于jquery-1.8.3开发 * 主要实现自定义弹窗提示效果:成功提示、警告提示、错误提示、询问提示、消息提示五种提示效果 * @name Msbox * @author ChenZhen || ...
jquery.messagebox.js插件,一个基于jquery的弹窗插件,ui效果设计不错 典型的轻量级的,附件提供了四种常用的弹窗效果 每次弹出或者收回的效果均是从顶部下拉或者反弹回去 使用方法: 1、将head中的样式...
jquery轻量级顶部下滑弹窗效果 jquery.messagebox.js插件,一个基于jquery的弹窗插件,ui效果设计不错 典型的轻量级的,附件提供了四种常用的弹窗效果 每次弹出或者收回的效果均是从顶部下拉或者反弹回去
弹窗是网页中经常看到的效果,以前的弹窗是用window.open()等方式在浏览器窗口新建另一个新窗口来完成的,这种弹窗方式现在已经被很多浏览器所拦截。今天我们来用更加友好的方式来实现弹窗效果。完成的功能效果如图...
jquery基于SimplePop.js插件实现的兼容性较好的弹窗效果源码.zip
主要介绍了一款基于jQuery的图片场景标注提示弹窗特效,需要的朋友可以参考下
基于bootstrap 的图片查看器,可实现鼠标点击放大等操作。可实现相册预览查看,类似qq相册查看照片效果。
jQuery点击缩略图显示大图切换效果代码基于jquery-1.4.2.min.js制作,点击缩略图显示图文并茂的大图,带箭头按钮图标,控制缩略图和大图切换。
jquery实现可拖动弹出层特效是一款非常实用的功能,基于jquery实现的弹出层效果。
jQuery从页面右上角弹出的浮层代码是一款基于jquery实现的鼠标点击从页面右上角弹出的浮层代码,代码很简单,效果很实用!
基于jQuery的artDialog 弹出窗插件效果 4.1.7.zip
本源码收集了19款基于jquery-css3实现的js遮罩弹窗效果,弹出层,就是大家熟悉的浮动窗口,由html5 CSS3 JS jQuery联合实现的可自定义的弹出窗口,实例效果丰富,调用简单,初学者也可看懂。一个HTML5页面演示了19种...
一款基于jquery+css3的非常漂亮的翻转登录效果,并且引用了漂亮的sweetalert弹窗插件,让整个用户体验更加的舒适和炫酷,在这无偿提供给大家,下载也不需要积分。
基于jQuery弹出层有9种效果 网页弹出层效果 9种
使用jQuery video在线视频播放功能。div图片列表鼠标悬停显示视频播放按钮,点击弹窗方式打开mp4视频播放效果代码。默认我们需要配置ipath的视频路径。这是一款简洁好用的弹窗视频播放。
基于jquery弹出注册框插件,该框封装拖拽效果
jquery叠加效果自动滚动切换特效是一款基于jquery实现的叠加滚动特效代码。
本文给大家分享基于jquery实现弹窗居中效果类似于alert(),代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下