JAVASCRIPT弹出窗口DIV层效果代码

在本教程中，我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果。

 

创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一。传统的JavaScript弹窗已经不适合目前网站的设计理念了，理由有二：首先，不友好——生硬的弹出对话框且伴随着“哐”的一声对用户体验是个很大的挑战；其次，兼容性不够强——有相当多的浏览器屏蔽了这种JS的Alert()方法。于是，一个良好用户体验的网站需要一种更合理的解决方案——使用很少的HTML代码，很少的CSS代码和几行的JavaScript代码来模拟浏览器默认的弹出窗口（即替换掉默认的Alert()界面和功能）。

实现原理：

 

首先，我们将弹出框中的内容放置在一个特殊的DIV层中，然后默认隐藏它（即初始不可见，使用CSS即可实现）。当用户执行某个动作时——比如点击某个链接或者将鼠标光标移动到某个链接上——我们将之前设置好的隐藏层显示在所有页面元素的最上层（将使用JS操作实现）。此外，我们还将在弹出DIV窗口中设置一个按钮来执行——当用户点击此按钮时关闭窗口的功能。

 

实现过程:

 

就如我上面提到的，我们首先需要创建一个特殊的DIV层，然后我们将弹出窗口的内容放在这个DIV层里面。在这里，我们将其ID命名为“popupcontent ”以区别于其他DIV层。

<div id="popupcontent">这是一个DIV弹窗效果!</div>