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

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

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

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

　　首先给大家看看效果，先有一个直观的了解：

　　如上图所示，经过我的测试，这个对话框可以使用在IE6 7 8，Firefox，Chrome等多个主流浏览器中。下面就和大家一起看看他的代码吧。

  1. 首先，我们需要判断浏览器的类型，这里用了几个bool变量来代表不同的浏览器。
 1 var springweb_typeIsIE = false;
 2 var springweb_typeIsGecko = false;
 3 var springweb_typeIsWebkit = false;
 4 
 5 var springweb_typeIsIE6 = false;
 6 var springweb_typeIsIE7 = false;
 7 var springweb_typeIsIE8 = false;
 8 var springweb_typeIsFireFox = false;
 9 var springweb_typeIsChrome = false;
10 var springweb_typeIsSafari = false;
11 
12 var agent = window.navigator.userAgent;
13 
14 if (agent.indexOf("MSIE 6") != -1) {
15     springweb_typeIsIE6 = true;
16     springweb_typeIsIE = true;
17 }
18 else if (agent.indexOf("MSIE 7") != -1) {
19     springweb_typeIsIE7 = true;
20     springweb_typeIsIE = true;
21 }
22 else if (agent.indexOf("MSIE 8") != -1) {
23     springweb_typeIsIE8 = true;
24     springweb_typeIsIE = true;
25 }
26 else if (agent.indexOf("Firefox") != -1) {
27     springweb_typeIsFireFox = true;
28     springweb_typeIsGecko = true;
29 } else if (agent.indexOf("Chrome") != -1) {
30     springweb_typeIsChrome = true;
31     springweb_typeIsWebkit = true;
32 }
33 else if (agent.indexOf("Safari") != -1) {
34     springweb_typeIsSafari = true;
35     springweb_typeIsWebkit = true;
36 }

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

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

 1 document.body.style.overflowY = "hidden";
 2 document.body.style.overflowX = "hidden";
 3 var divBackground = document.createElement("div");
 4 divBackground.style.position = "absolute";
 5 divBackground.style.left = "0px";
 6 divBackground.style.top = document.body.scrollTop +  "px";
 7 divBackground.style.width = "100%";
 8 divBackground.style.height = "100%";
 9 if (springweb_typeIsChrome || springweb_typeIsFireFox) {
10     divBackground.style.backgroundColor = "rgba(0,0,0,0.7)";
11 } else {
12     divBackground.style.backgroundColor = "#000000";    
13     divBackground.style.filter = "alpha(opacity=70)";
14 }
15 divBackground.style.zIndex = "99";
16 document.body.appendChild(divBackground);

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

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

 1 var dialogWidth = 260;
 2 var dialogHeight = 120;
 3 var fontSize = 14;
 4 var lineWidth = document.body.clientWidth * 0.7;
 5 if ((fontSize * msg.length) < lineWidth) {
 6       dialogWidth = parseInt(fontSize * msg.length) + 50;
 7 } else {
 8       dialogWidth = parseInt(lineWidth);
 9       dialogHeight += parseInt(((fontSize * msg.length) / lineWidth) * fontSize);
10             
11 }
12         
13 divDialog.style.width = dialogWidth + "px";
14 divDialog.style.height = dialogHeight + "px";        
15 divDialog.style.position = "absolute";
16 divDialog.style.border = "1px solid #C0D7FA";
17 divDialog.style.borderRight = "2px outset #DEDEDE";
18 divDialog.style.borderLeft = "2px outset #DEDEDE";
19 divDialog.style.left = ((document.body.clientWidth / 2) - (dialogWidth / 2)) + "px";
20 divDialog.style.top = (document.body.scrollTop + (document.body.clientHeight / 2) - (dialogHeight / 2)) + "px";
21 divDialog.style.zIndex = "100";

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

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

 1 var divHead = document.createElement("div");
 2 if (title != undefined) {
 3     divHead.innerHTML = title;
 4 } else {
 5     divHead.appendChild(document.createTextNode("消息"));
 6 }
 7 divHead.style.width = "100%";
 8 divHead.style.height = "25px";
 9 divHead.style.lineHeight = "25px";
10 divHead.style.fontSize = "14px";        
11 divHead.style.fontWeight = "bold";
12 divHead.style.borderBottom = "1px outset #8989FF";
13 divHead.style.color = "white";
14 divHead.style.textIndent = "10px";
15 divHead.style.backgroundColor = "blue";
16 divHead.style.backgroundImage = "url('" + springweb_basePath  + "/images/headbg.png')";
17 divHead.style.cursor = "move";
18 divHead.onmousedown = function() {
19 
20     divDialog.dragging = true;
21     
22 };
23 divHead.onmouseup = function() {
24 
25     divDialog.dragging = false;
26 
27 };
28 
29 document.body.onmousemove = function(e) {
30 
31     if (!divDialog.dragging) return;
32     e = e || window.event;
33     var mouseX, mouseY;
34     var mouseOffsetX, mouseOffsetY;
35     if (e.pageX || e.pageY) {
36         mouseX = e.pageX;
37         mouseY = e.pageY;
38 
39     } else {
40         mouseX =
41             e.clientX + document.body.scrollLeft -
42             document.body.clientLeft;
43         mouseY =
44             e.clientY + document.body.scrollTop -
45             document.body.clientTop;
46 
47     }
48     
49     divDialog.style.left = (mouseX - dialogWidth * 0.4) + "px";
50     divDialog.style.top = (mouseY - 10) + "px";            
51 };
52         
53 
54 divDialog.appendChild(divHead);

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

　　最后，是关于对话框内容区域的创建：

 1 var divContent = document.createElement("div");
 2 divContent.style.textAlign = "center";
 3 divContent.style.padding = "15px";
 4 divContent.style.fontSize = "12px";
 5 
 6 if (springweb_typeIsIE) {
 7     divContent.style.height = parseInt(dialogHeight - 25) + "px";
 8 } else {
 9     divContent.style.height = parseInt(dialogHeight - 55) + "px";
10 }
11 
12 divContent.style.backgroundColor = "#ffffff";
13 if (springweb_typeIsIE6 || springweb_typeIsIE7 || springweb_typeIsIE8) {
14     divContent.style.filter =
15     "progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#FFFFFF,endColorStr=#C2E2F8)";
16 } else if (springweb_typeIsFireFox) {
17     divContent.style.backgroundImage =
18     "-moz-linear-gradient(left,rgba(255,255,255,1),rgba(194,226,248,1))";
19 } else if (springweb_typeIsWebkit) {
20     divContent.style.backgroundImage =
21     "-webkit-gardient(linear,0% 0%,100% 100%,from(#FFFFFF),to(#000000))";
22 }
23 
24 
25 
26 
27 divContent.innerHTML = msg + "<br /><br />";
28 
29 
30 divDialog.appendChild(divContent);
31 
32 var closeButton = document.createElement("img");
33 closeButton.style.cursor = "hand";
34 closeButton.setAttribute("src", springweb_basePath + "/images/okButton.png");
35 closeButton.setAttribute("alt", "确定");
36 
37 //the click event when the dialog is closing.
38 closeButton.onclick = function() {
39 
40     document.body.removeChild(divBackground);
41     document.body.removeChild(divDialog);
42     document.body.style.overflowY = "";
43     document.body.style.overflowX = "";
44 };
45 divContent.appendChild(closeButton);
46 divDialog.focus();
47 document.body.appendChild(divDialog);    

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

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

示例文件：示例文件下载

转载于:https://www.cnblogs.com/chenrunuan/archive/2010/03/24/1693701.html

javascript中alert函数的替代方案，一个自定义的对话框的方法(引用)相关推荐

  1. javascript中alert函数的替代方案，一个自定义的对话框的方法

    大家好,我们平时在使用Javascript的时候,经常会需要给用户提供一些反馈信息,完成这个功能有很多种方法.但在平时开发中我们用的最多的可能就是alert这个函数了(这里只说一般情况,不排除个别高手 ...

  2. 【全网之最】全网最简洁判断JavaScript中字符串是否以某一个特定字符串结尾的方法，多用于判断文件名的后缀（格式）

    "被查询字符串".split("结尾字符串").slice(-1)[0] === ""例如: 'abcdef'.split("g& ...

  3. Javascript中的函数重载-最佳做法

    用JavaScript伪造函数重载的最佳方法是什么? 我知道不可能像其他语言一样重载Javascript中的函数. 如果我需要两个函数一起使用foo(x)和foo(x,y,z) ,这是最佳/首选方式: ...

  4. JavaScript中实现函数重载和参数默认值

    2019独角兽企业重金招聘Python工程师标准>>> 参数默认值是指在调用函数时,若省略了某个实参,函数会自动为该参数分配一个默认值,使得函数调用的方便性和灵活性大大提高. 举个例 ...

  5. 彻底理解JavaScript中回调函数 （推荐）

    在javascript中回调函数非常重要,它们几乎无处不在.像其他更加传统的编程语言都有回调函数概念,但是非常奇怪的是,完完整整谈论回调函数的在线教程比较少,倒是有一堆关于call()和apply() ...

  6. javascript中setTimeout()函数

    javascript中setTimeout()函数 大家都知道javascript中的setTimeput()函数的作用,一般会用他来处理一些连续的事情,们先看一个例子: <head>   ...

  7. 浅谈Javascript中的函数重载实现

    其它面向对象语言如Java的一个常见特性是:能够根据传入的不同数量量或类型的参数,通过"重载"函数来发挥不同的功用.但是这个特性在Javascript中并没有被直接支持,可是有很多 ...

  8. javaScript 中 call 函数的用法说明

    javaScript 中 call 函数的用法说明 javaScript 中的 call() 是一个奇妙的方法,但也是一个让人迷惑的方法,先看一下官方的解释: call 方法 请参阅 应用于:Func ...

  9. 浅析 JavaScript 中的 函数 uncurrying 反柯里化

    柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...

最新文章

  1. java对象序列化克隆_JAVA 对象克隆和序列化
  2. 从城市大脑到世界数字大脑 构建人类协同发展的超级智能平台
  3. FPGA开发综合技巧
  4. 马哥2013年运维视频笔记 day02 Linux系统常识
  5. 以太坊钱包1-Android-创建钱包
  6. php不支持定时器么,PHP没有定时器？
  7. 数据科学竞赛-数据挖掘赛流程
  8. ITester软件测试小栈，点击领取你的能量值！
  9. Android 使用ContentProvider扫描手机中的图片，仿微信显示本地图片效果
  10. HTTP请求字符限制和HTTP状态码
  11. 从零开始学习编程，会很难学吗？新手想快速掌握应该怎么学？
  12. linux学习教程：Vim编辑器和恢复ext4下误删除文件-Xmanager工具
  13. 公众号写作排版指南v2.0（适配Dark Mode）
  14. IDEA2019汉化教程，亲测有效，无内鬼，速
  15. 走向世界中的我国摄影测量与遥感 ——访中国测绘学会理事长、国家测绘局原副局长杨凯
  16. matlab无法打开wps的xls文件,WPS无法打开XLS文件怎么办 XLS文件出现异常无法打开怎么处理...
  17. SpringMVC 学谈 (第四章)
  18. 在altium designer原理图中如何查找相同的网络标号？
  19. 计算机映像缺失磁盘如何修复,重装Win10系统找不到硬盘的解决方法
  20. 即将公布的2020年10m分辨率全球土地利用数据（欧空局出品）

热门文章

  1. 盘点：2019年最赚钱的10种编程语言
  2. MySQL 高级- 输出参数
  3. SpringSecurity分布式整合之认证模块搭建
  4. Java虚拟机对synchronized的优化
  5. Redis中的Lua脚本超时
  6. 返回结果数据实体类R
  7. log4j2 配置文件
  8. 常用的函数式接口_Function接口_默认方法andThen
  9. RBAC模型：设计思路
  10. Spring Boot整合@CacheEvict注解使用