Question

我一直在使用一个简单的脚本弹出一个隐藏的div，并在后面弹出一个绝对的hyperlink作为＆＃34; failsafe＆＃34;用户关闭弹出窗口的方式。现在我想要多个弹出窗口＆＃34;在同一页面上，我需要进行调整，以便{I} ID无法定位。 getElementsbyClassName似乎没有效果。

我当前的 HTML 代码：

<a href="javascript:void(0)" onclick="document.getElementById('buttonOne').style.display='block';document.getElementById('fade').style.display='block'">Button One</a>
<a href="javascript:void(0)" onclick="document.getElementById('buttonTwo').style.display='block';document.getElementById('fade').style.display='block'">Button Two</a>

<div id="buttonOne" class="white_content"><a class="closeWindow" href="javascript:void(0)" onclick="document.getElementById('buttonOne').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a>
                    <p>BUTTON ONE CONTENT</p>
</div>

<div id="buttonTwo" class="white_content"><a class="closeWindow" href="javascript:void(0)" onclick="document.getElementById('buttonOne').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a>
                    <p>BUTTON TWO CONTENT</p>
</div>

<div id="fade" class="black_overlay"><a href="javascript:void(0)" onclick="document.getElementsByClassName('buttonOne').style.display='none';document.getElementById('fade').style.display='none'"></a></div>

还有一些 CSS ：

.black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.black_overlay a {
    display:block;
    width:100%;
    height:100%;
    cursor:unset;
}

.white_content {
    display: none;
    position: fixed;
    top: 12%;
    left: 12%;
    width: 75%;
    height: 75%;
    padding: 16px;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

因此弹出触发器/按钮工作正常，因为我可以使用唯一ID将每个按钮连接到其各自的内容window。但是底部的div（#fade）是窗口后面的内容，并用半透明覆盖填充背景。我喜欢在那里有一个巨大的链接，只要你在内容窗口外面点击就关闭了窗口。因为它需要通过ID来定位当前打开的div容器，所以我不知所措。

我尝试用document.getElementsbyClassName替换其中的链接，并为所有窗口提供相同的类，但我收到undefined错误。

非常感谢任何帮助！

Answer 1

一个最小化更改解决方案是使用全局变量跟踪活动按钮，如下所示（全局为activeButton，代码更改位于onclick属性中a标记和#fade标记，并且有一些JavaScript声明变量）：

var activeButton;

.black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.black_overlay a {
    display:block;
    width:100%;
    height:100%;
    cursor:unset;
}

.white_content {
    display: none;
    position: fixed;
    top: 12%;
    left: 12%;
    width: 75%;
    height: 75%;
    padding: 16px;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

<a href="javascript:void(0)" onclick="activeButton = document.getElementById('buttonOne'); activeButton.style.display='block';document.getElementById('fade').style.display='block'">Button One</a>
<a href="javascript:void(0)" onclick="activeButton = document.getElementById('buttonTwo'); activeButton.style.display='block';document.getElementById('fade').style.display='block'">Button Two</a>

<div id="buttonOne" class="white_content"><a class="closeWindow" href="javascript:void(0)" onclick="document.getElementById('buttonOne').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a>
                    <p>BUTTON ONE CONTENT</p>
</div>

<div id="buttonTwo" class="white_content"><a class="closeWindow" href="javascript:void(0)" onclick="document.getElementById('buttonOne').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a>
                    <p>BUTTON TWO CONTENT</p>
</div>

<div id="fade" class="black_overlay"><a href="javascript:void(0)" onclick="if (activeButton) { activeButton.style.display='none';} activeButton = undefined;document.getElementById('fade').style.display='none'"></a></div>

我会强烈建议将所有JavaScript从onclick=...属性移到函数中，但这不仅仅是因为它可以减少代码重复次数。

Javascript Popup和Class而不是ID

1 个答案: