使用原生JavaScript实现自定义DIV弹窗效果

自定义DIV弹窗概述

本教程旨在通过通俗易懂的讲解和精简的代码，演示如何构建一个基于JavaScript的自定义DIV弹出层效果。

在现代网页设计中，传统的JavaScript原生弹窗已逐渐被淘汰，主要原因包括两点：一是用户体验不佳，生硬的对话框弹出及伴随的声音提示令人不适；二是兼容性差，许多现代浏览器默认屏蔽了Alert()方法。因此，为了提供更友好的交互体验，推荐使用少量HTML结构、CSS样式及JavaScript逻辑来模拟并替代默认的弹窗功能。

实现思路如下：首先将弹窗内容封装在一个特殊的DIV容器中，并默认将其隐藏（利用CSS控制初始可见性）。当用户触发特定动作（如点击链接或鼠标悬停）时，通过JavaScript将该隐藏层显示在页面所有元素的最顶层。此外，在弹窗内部添加一个关闭按钮，点击即可执行关闭窗口逻辑。

HTML结构构建

如前所述，第一步是创建一个专用的DIV层用于承载弹窗内容。为了便于区分和管理，建议为该DIV指定一个唯一的ID，例如“popupcontent”。

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

CSS样式设置

接下来，对该DIV层进行CSS样式美化。核心需关注的属性包括：overflow（处理内容溢出）、visibility（控制显示与隐藏）以及position（确定定位方式）。虽然示例中添加了其他美化代码，但上述三个属性是实现功能的关键。最终定义的CSS样式如下：

 
#popupcontent{
position: absolute;
visibility: hidden;
overflow: hidden;
border:1px solid #CCC;
background-color:#F9F9F9;
border:1px solid #333;
padding:5px;
} 

观察上述CSS代码中的关键部分可知，该DIV层在初始状态下处于不可见状态。

用户可根据实际需求调整美化样式，但务必保留position、visibility和overflow这三个核心属性，以确保弹窗功能正常。

JavaScript逻辑实现

这是本教程的核心部分，我们将编写两个主要函数：一个用于显示弹窗，另一个用于隐藏弹窗。这两个函数将包含主要的逻辑处理。

在函数执行过程中，需按顺序处理以下逻辑：

计算并设置弹窗在屏幕上的显示位置（即定位坐标）；

在弹窗内容中动态添加一个状态栏或关闭按钮，用于用户手动关闭已打开的窗口；

最终显示弹出窗口。

为简化示例，此处设定的显示位置为Top：200，Left：200。这意味着以浏览器内容区的左上角为原点，窗口将向下偏移200像素，向左偏移200像素。

弹窗的尺寸可通过显示函数的参数进行动态设置，主要包含两个参数：窗口宽度（w）和窗口高度（h）。

若需基于本例进行二次开发，需注意获取弹窗DIV层的DOM对象。可通过getElementById方法获取ID为“popupcontent”的DOM元素。

 
var popUp = document.getElementById("popupcontent");

获取该DOM对象后，即可在JavaScript中修改窗口的相对位置及尺寸大小。

 
popUp.style.top = "200px";//窗口距离浏览器内容区最上方的偏移值
popUp.style.left = "200px";//窗口距离浏览器内容区最左边的偏移值
popUp.style.width = w + "px";//窗口的宽度
popUp.style.height = h + "px";//窗口的高度

接下来，需为窗口添加一个“关闭”按钮。为实现完美功能，首先声明一个全局变量用于存储弹窗的原始内容。这样做的目的是，若页面中存在多个内容不同的弹窗，无需在每个DIV中重复复制按钮代码，从而简化逻辑处理：

 
if (baseText == null) baseText = popUp.innerHTML;
popUp.innerHTML = baseText +
"<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window <button></div>";

最后需注意关闭按钮的定位。这可通过设置该按钮对象的上外边距（marginTop）实现，数值设定为略小于整个弹窗DIV的高度即可。

至此，所有行为逻辑讲解完毕，以下是弹窗显示函数的完整代码：

 
var baseText = null;
function showPopup(w,h){
var popUp = document.getElementById("popupcontent");
popUp.style.top = "200px";
popUp.style.left = "200px";
popUp.style.width = w + "px";
popUp.style.height = h + "px";
if (baseText == null) baseText = popUp.innerHTML;
popUp.innerHTML = baseText + "<div id=\"statusbar\"><button onclick=\"hidePopup();
\">Close window<button></div>";
var sbar = document.getElementById("statusbar");
sbar.style.marginTop = (parseInt(h)-40) + "px";
popUp.style.visibility = "visible";
} 

隐藏弹窗的逻辑相对简单。只需获取弹窗DIV的DOM对象，并将其visibility属性设置为“hidden”即可。

 
function hidePopup(){
var popUp = document.getElementById("popupcontent");
popUp.style.visibility = "hidden";
} 

触发与调用示例

只需在链接或按钮的事件处理程序中调用showPopup()函数即可触发弹窗。

例如，当鼠标移动到链接上时弹出窗口：

<a href="#" onmouseover="showPopup(300,200);" >Open popup</a>

<a href="#" onclick="showPopup(300,200);" >Open popup</a>