用js实现的自定义的对话框的实现代码


Posted in Javascript onMarch 21, 2010

大家好,我们平时在使用Javascript的时候,经常会需要给用户提供一些反馈信息,完成这个功能有很多种方法。但在平时开发中午我们用的最多的可能就是alert这个函数了(这里只说一般情况,不排除个别高手~),使用这个函数确实很方便,可以很简单的向用户提供一些交互信息。不过它也有很多不足,比如他的外观很简

单,而且不可控制,再有它属于浏览器级别的函数,是由各个浏览器自己实现的,所以在不同的浏览器上面,它的界面都不太一样。如果是在以前,这种情况或许很容

易被大多数用户所接受,不过随着时间的推移,用户越来越希望得到更好的体验。所以现在大家经常会在很多网站上看到JS做出来的各种对话框,这些界面会是用户体

验提升不少,所以今天就说说关于这方面的内容吧,进入正题,不说废话啦~

首先给大家看看效果,先有一个直观的了解:
用js实现的自定义的对话框的实现代码
 如上图所示,经过我的测试,这个对话框可以使用在IE6 7 8,Firefox,Chrome等多个主流浏览器中。下面就和大家一起看看他的代码吧。
首先,我们需要判断浏览器的类型,这里用了几个bool变量来代表不同的浏览器。

var springweb_typeIsIE = false; 
var springweb_typeIsGecko = false; 
var springweb_typeIsWebkit = false; 
var springweb_typeIsIE6 = false; 
var springweb_typeIsIE7 = false; 
var springweb_typeIsIE8 = false; 
var springweb_typeIsFireFox = false; 
var springweb_typeIsChrome = false; 
var springweb_typeIsSafari = false; 
var agent = window.navigator.userAgent; 
if (agent.indexOf("MSIE 6") != -1) { 
springweb_typeIsIE6 = true; 
springweb_typeIsIE = true; 
} 
else if (agent.indexOf("MSIE 7") != -1) { 
springweb_typeIsIE7 = true; 
springweb_typeIsIE = true; 
} 
else if (agent.indexOf("MSIE 8") != -1) { 
springweb_typeIsIE8 = true; 
springweb_typeIsIE = true; 
} 
else if (agent.indexOf("Firefox") != -1) { 
springweb_typeIsFireFox = true; 
springweb_typeIsGecko = true; 
} else if (agent.indexOf("Chrome") != -1) { 
springweb_typeIsChrome = true; 
springweb_typeIsWebkit = true; 
} 
else if (agent.indexOf("Safari") != -1) { 
springweb_typeIsSafari = true; 
springweb_typeIsWebkit = true; 
}

如上所示,这里通过检测agent头来判断不同的浏览器,这是一个比较简单的判断方法。

下面开始构造我们的对话框,在构造对话框前,我们先要制造一种模态窗体的效果(就是当对话框弹出来的时候,用户不能操作页面上的其余内容),这里我们就用一个黑色的透明层来完成这样的效果。

document.body.style.overflowY = "hidden"; 
var divBackground = document.createElement("div"); 
divBackground.style.position = "absolute"; 
divBackground.style.left = "0px"; 
divBackground.style.top = "0px"; 
divBackground.style.width = "100%"; 
divBackground.style.height = "100%"; 
if (springweb_typeIsChrome || springweb_typeIsFireFox) { 
divBackground.style.backgroundColor = "rgba(0,0,0,0.7)"; 
} else { 

divBackground.style.backgroundColor = "#000000"; 
divBackground.style.filter = "alpha(opacity=70)"; 
} 
divBackground.style.zIndex = "99"; 
document.body.appendChild(divBackground);

上面的代码,我们首先将浏览器的滚动条禁止,以防止用户在弹出对话框的时候滚动浏览器窗口,接下来设定相应的样式,一个比较重要的就是8-13行,这里根据浏览器的类型来应用不同的CSS样式来达到透明的效果,对于IE浏览器,我们使用IE自带的滤镜功能,而对于其他浏览器,我们使用基于CSS3的rgba方式实现透明效果。

接下来,我们要构造对话框,这里首先创建了一个div层,来代表我们整个对话框。方法如下:

var dialogWidth = 260; 
var dialogHeight = 120; 
var fontSize = 14; 
var lineWidth = document.body.clientWidth * 0.7; 
if ((fontSize * msg.length) < lineWidth) { 
dialogWidth = parseInt(fontSize * msg.length) + 50; 
} else { 
dialogWidth = parseInt(lineWidth); 
dialogHeight += parseInt(((fontSize * msg.length) / lineWidth) * fontSize); 
} 
divDialog.style.width = dialogWidth + "px"; 
divDialog.style.height = dialogHeight + "px"; 
divDialog.style.position = "absolute"; 
divDialog.style.border = "1px solid #C0D7FA"; 
divDialog.style.borderRight = "2px outset #DEDEDE"; 
divDialog.style.borderLeft = "2px outset #DEDEDE"; 
divDialog.style.left = ((document.body.clientWidth / 2) - (dialogWidth / 2)) + "px"; 
divDialog.style.top = ((document.body.clientHeight / 2) - (dialogHeight / 2)) + "px"; 
divDialog.style.zIndex = "100";

这里,首先根据消息的字数计算了对话框的尺寸(这里的计算方法不一定最好,如果有更好的计算方法还望大家指教),后面那些DOM代码就不用我多解释了吧。

接下来,我们创建对话框的标题栏,这个用来显示对话框的标题,并且用它了实现对话框的拖动操作。

var divHead = document.createElement("div"); 
if (title != undefined) { 
divHead.innerHTML = title; 
} else { 
divHead.appendChild(document.createTextNode("消息")); 
} 
divHead.style.width = "100%"; 
divHead.style.height = "25px"; 
divHead.style.lineHeight = "25px"; 
divHead.style.fontSize = "14px"; 
divHead.style.fontWeight = "bold"; 
divHead.style.borderBottom = "1px outset #8989FF"; 
divHead.style.color = "white"; 
divHead.style.textIndent = "10px"; 
divHead.style.backgroundColor = "blue"; 
divHead.style.backgroundImage = "url('" + springweb_basePath + "/images/headbg.png')"; 
divHead.style.cursor = "move"; 
divHead.onmousedown = function() { 
divDialog.dragging = true; 
}; 
divHead.onmouseup = function() { 
divDialog.dragging = false; 
}; 
document.body.onmousemove = function(e) { 
if (!divDialog.dragging) return; 
e = e || window.event; 
var mouseX, mouseY; 
var mouseOffsetX, mouseOffsetY; 
if (e.pageX || e.pageY) { 
mouseX = e.pageX; 
mouseY = e.pageY; 
} else { 
mouseX = 
e.clientX + document.body.scrollLeft - 
document.body.clientLeft; 
mouseY = 
e.clientY + document.body.scrollTop - 
document.body.clientTop; 
} 
divDialog.style.left = (mouseX - dialogWidth * 0.4) + "px"; 
divDialog.style.top = (mouseY - 10) + "px"; 
}; 
divDialog.appendChild(divHead);

这里呢,有必要说一下的就是,鼠标按下和弹起事件,这里给div对象多增加了一个dragging的属性,用来代表对话框是否正在拖动中(这也是JS的特性之一,对object类型的对象指定新属性的一个方法:如果之前对象没有这个属性,只需通过对象名.属性名="值" 的方式,就可以为对象增加新属性),在鼠标移动事件中,我们通过对象的dragging属性,来决定是否移动对话框,关于对话框的移动位置,这里我偷懒了~没有判断对话框和鼠标的相对位置,而是给了一个常量,这样每次开始拖动时,对话框会稍微"瞬移"一下,有兴趣的朋友可以帮忙完善一下,呵呵。

最后,是关于对话框内容区域的创建:

var divContent = document.createElement("div"); 
divContent.style.textAlign = "center"; 
divContent.style.padding = "15px"; 
divContent.style.fontSize = "12px"; 
if (springweb_typeIsIE) { 
divContent.style.height = parseInt(dialogHeight - 25) + "px"; 
} else { 
divContent.style.height = parseInt(dialogHeight - 55) + "px"; 
} 
divContent.style.backgroundColor = "#ffffff"; 
if (springweb_typeIsIE6 || springweb_typeIsIE7 || springweb_typeIsIE8) { 
divContent.style.filter = 
"progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#FFFFFF,endColorStr=#C2E2F8)"; 
} else if (springweb_typeIsFireFox) { 
divContent.style.backgroundImage = 
"-moz-linear-gradient(left,rgba(255,255,255,1),rgba(194,226,248,1))"; 
} else if (springweb_typeIsWebkit) { 
divContent.style.backgroundImage = 
"-webkit-gardient(linear,0% 0%,100% 100%,from(#FFFFFF),to(#000000))"; 
} 
divContent.innerHTML = msg + "<br /><br />"; 
divDialog.appendChild(divContent); 
var closeButton = document.createElement("img"); 
closeButton.style.cursor = "hand"; 
closeButton.setAttribute("src", springweb_basePath + "/images/okButton.png"); 
closeButton.setAttribute("alt", "确定"); 
//the click event when the dialog is closing. 
closeButton.onclick = function() { 
document.body.removeChild(divBackground); 
document.body.removeChild(divDialog); 
document.body.style.overflowY = ""; 
}; 
divContent.appendChild(closeButton); 
divDialog.focus(); 
document.body.appendChild(divDialog);

这里应该不用多做解释了,稍微说一下,就是在13-22行的代码,这个是根据不同的浏览器来分别实现渐变效果,IE的话,用微软提供的渐变,Webkit或者Gecko内核的浏览器使用相应的CSS3标准也可以实现渐变效果。

最后嘛,这个方法支持大多数浏览器,个别浏览器如果不能完全支持,还请各位见谅,期待大家有更加完善的方法一起讨论,下面是一个示例,有兴趣的朋友可以看看。转载请注明出处~
示例文件:JS对话框实现

Javascript 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 #Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 #Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 #Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 #Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 #Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 #Javascript
javascript qq右下角滑出窗口 sheyMsg
Mar 21 #Javascript
You might like
PHP 身份证号验证函数
2009/05/07 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
javascript整除实现代码
2010/11/23 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
js同源策略详解
2015/05/21 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
js注册时输入合法性验证方法
2017/10/21 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
python检索特定内容的文本文件实例
2018/06/05 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
电气自动化专业职业规划范文
2014/02/16 职场文书
小学庆六一活动方案
2014/02/28 职场文书
寄语学生的话
2014/04/10 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
Python 键盘事件详解
2021/11/11 Python
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis