javascript - 网站 JS 对 X 按钮没有反应(关闭)

Question

我正在制作一个网站，我想要一个弹出的窗口，当我点击 X 时，它通过将其 css 设置为 display:none; 来关闭；这是我的 HTML:

<div id="PortOverlay"></div>
<div id="PortContainer">
   <div id="poCross">X</div>
</div>

这是我的 CSS:

#PortOverlay {width:100%;height:100%;top:0px;left:0px;position:fixed;z-index:10;background-color:#222;opacity:0.4;display:block;}
#PortContainer {width:800px;height:auto;min-height:800px;position:fixed;margin:18px auto;background:#FFF;border-radius:10px;box-shadow:0px 0px 1px 1px #888;}
#PortContainer > div#poCross {width:auto;height:auto;font-family:arial;font-weight:bolder;font-family:16px;margin:15px;}
#PortContainer > div#poContent {}

这是我的 JS:

var poCross, PortContainer, PortOverlay;
function poClose(){
poCross = document.getElementById('poCross');
PortContainer = document.getElementById('PortContainer');
PortOverlay = document.getElementById('PortOverlay');
if (poCross.click()) {
    PortContainer.style.display = "none";
    PortOverlay.style.display = "none";
    alert('test'); // Alert included for testing //
   }
}

我什至包括了一个警报来测试它是否只是一个 CSS 问题，但这也没有反应。谢谢您的帮助。(我是荷兰人，15 岁，很抱歉语法错误)

Answer 1

您拥有的代码仅在页面加载时运行。那时，您的 DOM 元素存在，但 click() 将始终返回 false，代码将永远不会被再次计算。

您需要的是一个onClick 事件处理程序。事件处理程序在事件发生时运行，而不是在代码首次加载时运行。