alert,confirm弹出窗样式美化

在js中,alert是大家用得非常多的一个函数了吧。这个弹出窗口,在ie或是firefox以及google下的表现各自不同。。。

这是firefox下面的。。。

这是我们常见的IE...

今天,我们要向大家介绍的就是如何改变这些弹出窗口的外表,我们以凡客诚品的设计为例子。。。

首先,我们要引进一个脚本,这个脚本的创作者叫showbo,脚本里的变量名字就是这个,不过作者的网站太多弹窗广告了,看到头晕。。。

在这个脚本里,作者先对浏览器进行判断,这也是JQ比JS好的地方吧,至少你不用写那么多代码去兼容浏览器。。。

接着判断浏览器的宽度高度,还有clientWidth,cliendHeigt,scrollWidth,scrollHeight,这些用来判断弹出窗口的位置。。。关于那几个的用法,大家可参见的另一篇文章:http://www.163css.com/hihilinxuan/log/634742698153057500.html

作者创建了一个多层结构ID为dvmsgbox的DIV,弹出的背景色是通过滤镜解决的,我们要修改弹出层的样式就是根据这个div来写样式的。。。

这是凡客诚品的弹窗提示,挺漂亮的,我们借用它的设计。。。

以下是我制作的效果截图:

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2012/06/alert/index.html

下载地址:类似凡客诚品的alert,confirm弹出窗样式美化.zip

你可能感兴趣的:(脚本语言)