我有这个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>
谢谢!
答案 0 :(得分:1)
我不清楚页面中HTML控件的组织。结构似乎是错误的。 弹出窗口父div的CSS属性z-index必须大于页面中所有其他元素的属性,以实现您期望的功能。将popup-box1的z-index与弹出框上方可见的其他元素进行比较。 如果它没有成功,那么请复制粘贴html及其相关的css&amp; JS再次编码。
答案 1 :(得分:0)
我解决了。我加入了JS:
否则 e.style.display =&#39; block&#39 ;; e.style.zIndex =&#34; 1&#34 ;;
现在我的div已经掌握了一切。谢谢大家
答案 2 :(得分:0)
在这种情况下,您还可以通过将z-index:1添加到popupposition类来解决此问题,如下所示:
.popupposition{display:none;position:fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.7); width:100%; height:100%;z-index:1}