JavaScript封装对话框代替系统alert功能.docVIP

JavaScript封装对话框代替系统alert功能 我们在使用Javascript编写网页代码时经常会使用alert功能，用来显示各种提示信息，虽然alert非常好用，但是也很难看，而且在各个浏览器中的显示也不相同。 这是在chrome中的显示（位于屏幕中上部）： 这是IE8.0中的显示（位于屏幕的中间）： 这是Firefox中的显示（位于屏幕的中间）： 可见，UI的样式的确不好看，而且提示信息没有标题栏。那么可以使用自定义函数代替这个系统提供的函数吗？答案是肯定的，下面就我做的一些常识给大家说说。 我们需要的对话框函数必须要有良好的封装性，而且本人不喜欢为了个对话框还必须带上很多附加文件，因此，我将这个函数封装到一个dialog.js中，今后只要引用这个JS文件就可以使用自定义对话框。 我们的对话框是基于层DIV实现的，通过在文档流中插入一个DIV，从而显示我们的对话框，使用的函数是document.createElement div 。下面就是我的对话框样式： 它的布局结构如上图所示，在对话框下面还有一个覆盖层，用于遮挡页面的显示。我定义了一个函数： function showMessage id,title,msg,width,height,colsefunc 来封装这个对话框的显示，id是最外面的div的名称，title是标题栏的内容，msg是显示的内容，width,height是对话框的宽和高，closefunc是在关闭对话框时回调的函数。这样一个对话框已经能基本满足我们的要求了。下面我就其中的一些核心知识点给大家讲讲。 1、创建层元素使用var div document.createElement div ，创建完成后，设置它的各项属性，比如div.id id，最重要的是记得把你创建的层元素插入文档流：document.body.appendChild div ; 2、创建完元素后最重要的是设置它们的CSS属性，这个在JavaScript中有对应的属性：div.style.cssText，只要设置好这个CSS属性就能显示任意样式的对话框，比如我们这个div的CSS可以这样写：position:absolute; width:+width+px; height:+height+px; background:white; border:10px solid #ccc; z-index:1002;/* 注意我们的Z轴坐标应该比较大，这样对话框才会显示在最上面 */ 刚才的CSS中缺少了最重要的left和top坐标的设置，因为坐标的计算是我们对话框的难点之一，首先我们需要得到浏览器可用空间的大小： var w window.screen.availWidth;//宽度 var h window.screen.availHeight;//高度 然后需要确定滚动条的位置： if document.documentElement.scrollTop var scrolltop document.documentElement.scrollTop; else var scrolltop document.body.scrollTop; if document.documentElement.scrollLeft var scrollleft document.documentElement.scrollLeft; else var scrollleft document.body.scrollLeft; 由于在IE中没有指定DTD时document.documentElement.scrollTop的值是0，需要访问document.body.scrollTop才能得到滚动条的坐标，经过测试，在三大浏览器IE、chrom、firefox中表现良好。 最后计算出对话框显示的坐标： var left scrollleft+ w-20-width /2+px; var top scrolltop+ h-20-height /2+px; 3、设置对话框显示的内容可以使用下面的属性： contentdiv.innerHTML msg; 当点击关闭按钮时执行关闭函数： closediv.href javascript:closedialog +id+,closefunc ; 在closedialog中设置DIV层style.display ’none’就可以隐藏对话框，并检查closefunc是否有赋值，如果有的话就调用该函数。 通过以上几步，我们就做出了自己的对话框函数，可以在程序的任意位置调用。虽然网上有很多这样的对话框库可以下载，但是自己做一个有两点好处：1、代码非常精简，刨除了所有不必要的成分，只留下我们自己需要的