如何创建Javaｓｃｒｉｐｔ弹出窗口div层的效果
在本教程中，我将向您展示如何使用最流行的语言和最简洁的代码创建Javaｓｃｒｉｐｔ弹出窗口窗口层。创建一个弹出div窗口可能是最常见的问题之一，网站/网页制作了传统Javaｓｃｒｉｐｔ流行不适合网站的设计理念，有两个原因：第一，不友好--钝弹出对话框，并伴随着崩溃的用户体验是一个很大的挑战；其次，兼容性不够强，有相当数量的浏览器屏蔽JS警报（方法）。因此，一个好的用户体验的网站需要一个更合理的解决方案，使用很少的HTML代码，CSS代码和Javaｓｃｒｉｐｔ代码很少几行模拟浏览器默认的弹出窗口，即取代默认的提醒（）接口和功能。
实现原理：
首先，我们把弹出框的内容在一个特殊的div层，然后隐藏它默认情况下（即初始无形，CSS可以实现），当用户执行一个动作，比如点击一个链接或移动光标到一个链接，我们显示隐藏层之前的所有页面元素的顶部（使用JS操作）。此外，我们还将在弹出div窗口设置一个按钮来执行功能，当用户点击按钮关闭窗口。
实施过程：
正如我上面所提到的，我们首先需要创建一个特殊的div层，然后我们把里面的div层弹出窗口的内容。在这里，我们称其身份popupcontent是不同于其他的div层。
这是一个div弹出效果！
弹出窗口的CSS修饰符代码：
接下来，让我们为DIV弹出层已创建了CSS美化。最重要的参数是：溢出（内容溢出），知名度（能见度）和位置（定位方式）。同时，我还添加了很多其他的代码，这个窗口的作用，但这些只是为了美化，使这个窗口更加华丽。所以，我们最后定义CSS代码：
复制代码代码如下所示：
# popupcontent {
位置：绝对；
可见性：隐藏；
溢出：隐藏；
边境：1px solid # CCC；
背景颜色：# f9f9f9；
边境：1px solid # 333；
填料：5px；
}
从上面CSS代码的红色部分，您可以看到div层的初始默认状态是不可见的。
您可以根据需要美化代码，但一定要保持位置、可见性和溢出的三个属性。
Javaｓｃｒｉｐｔ代码用于触发和显示弹出窗口：
这可能是本教程中最重要和有趣的地方，然后我们将编写2个进程函数来显示和隐藏上面的div弹出窗口，当然，这两个函数包含一些主要逻辑。
过程功能中需要包含在顺序中的逻辑：
计算屏幕上Javaｓｃｒｉｐｔ弹出窗口的显示位置（位置）。
在弹出窗口中添加一个状态栏（或按钮）来关闭打开状态下的窗口。
显示弹出窗口。
为了简单起见，我们把这个例子中的显示位置上：200，左：200.that，浏览器的内容框的左上角的坐标，200px向下迁移和左偏200px。
弹出窗口的大小可以在显示函数的参数中设置，包括两个参数：窗口的长度和窗口的宽度。
如果您需要在这种情况下为这两次开发代码，则需要特别注意它。也就是说，获取弹出窗口div层的DOM对象。我们可以通过下面的DOM对象getElementById函数命名ID。
复制代码代码如下所示：
VaR弹出= document.getelementbyid（popupcontent ）；
在获取这个（弹出窗口）DOM对象后，我们可以修改js代码中窗口的相对位置和窗口大小。
复制代码代码如下所示：
popup.style.top =200px ； / /窗口距离浏览器内容区域的偏移值最高
popup.style.left =200px ； / /窗口浏览器内容区域的最左边的值偏移
popup.style.width = W + PX； / /窗口的宽度
popup.style.height = H + PX； / /窗口的高度
接下来，我们需要添加一个关闭按钮的窗口关闭窗口的打开状态窗口。完美地实现这一功能，首先我们需要声明一个全局变量，在弹出的窗口中分这是因为如果你显示多个内容不同的弹出页面存储的内容，你不需要复制按钮这些div层，从而简化了行为逻辑。
复制代码代码如下所示：
如果（basetext = = null）basetext = popup.innerhtml；
popup.innerhtml = basetext +
关闭窗口；
最后一个要注意的地方是关闭按钮的位置。这很容易实现，将按钮对象的空白边缘向上设置（空白端的值设置为小于弹出窗口的div高度）。
此时，将解释所有行为逻辑，最后弹出式显示功能的完整代码如下所示：
复制代码代码如下所示：
无功basetext = null；
功能showpopup（W，H）{
VaR弹出= document.getelementbyid（popupcontent ）；
popup.style.top =200px ；
popup.style.left =200px ；
popup.style.width = W +PX；
popup.style.height = H +PX；
如果（basetext = = null）basetext = popup.innerhtml；
popup.innerhtml = basetext +<按钮onclick =hidepopup（）；
关闭窗口；
VaR SBAR = document.getelementbyid（状态栏）；
sbar.style.margintop =（parseInt（H）- 40）+PX；
popup.style.visibility =可见；
}
隐藏弹出窗口：
隐藏弹出窗口的过程非常简单，只需要先获取弹出窗口的div对象，然后设置它的属性以隐藏它。
复制代码代码如下所示：
功能hidepopup（）{
VaR弹出= document.getelementbyid（popupcontent ）；
popup.style.visibility =隐藏；
}
扩展html代码，实现弹出窗口的效果。
我们需要做的是添加的JS功能showpopup（）到一个链接或按钮对应的事件。
例如，当鼠标移动到一个连接时，需要弹出一个窗口。
打开弹出
当鼠标单击连接时，需要弹出一个窗口。
打开弹出