切换可见性脚本将使两个 div 可见

Question

我有这个 JS 代码，它创建一个弹出框并使背景中的其他所有内容变为灰色。

    <script type="text/javascript">
    <!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
        if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

HTML

  <div id="wrapper">
          <p><a href="javascript:void(0)" onclick="toggle_visibility('popup-   box1');">Open popup box 1</a></p>
  </div>
     <div id="popup-box1" class="popupposition">
          <div id="popupwrapper">
              <div id="popupcontainer">
              ****POPUP BOX CONTENT
              </div>
          </div>
  </div>

页面背景上的所有内容都变成灰色且不可点击，但是页面的这 HTML 部分仍然可见，我该怎么办？

<div class="classfinder">
<div class="searchbox">
<ul>
<div class="searchboxclasswidth" onClick="return !!(classFunction() & changeColor1())"><li><p id="findclass"><a href><b>Trova classe </b></a></p></li>    </div>
<div class="searchboxcoursewidth" onClick="return !!(courseFunction() & changeColor2())"><li><p><a href><b>Trova corso</b></a></p></li></div>
</ul>

谢谢！

Answer 1

我不清楚您页面中 HTML 控件的组织方式。结构好像不对。 CSS 属性弹出窗口的父级 div 的 z-index 必须大于页面中所有其他元素的 z-index 才能实现您期望的功能。将 popup-box1 的 z-index 与弹出框上方可见的其他元素进行比较。如果没有成功，请再次复制粘贴 html 及其相关的 css 和 JS 代码。

Answer 2

我解决了。我给JS加了：

其他 e.style.display = 'block'; e.style.zIndex="1";

现在我的 div 是最重要的。谢谢大家

Answer 3

在这种情况下，您还可以通过将 z-index:1 添加到 popupposition class 来解决此问题，如下所示：

.popupposition{display:none;position:fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.7); width:100%; height:100%;z-index:1}

这样就避免了 JS 函数中 1 行不必要的代码。

切换可见性脚本将使两个 div 可见

Toggle visibility script will leave two divs visible

html

javascript

popup

popupwindow