Question

我有一个隐藏图层，当用户点击按钮时，图层设置为显示。如何使父页面变为禁用/灰显，以便用户无法单击父页面上的任何内容，直到图层关闭（设置为隐藏）

类似于灯箱画廊

我通过按钮（编辑）单击

从父页面调用图层中的函数

edit.onclick=function(){
        edit_box('show');           
    }

然后在图层我调用show函数

function edit_box(showhide)
{
  if(showhide == "show")
    {
     document.getElementById('popupbox').style.visibility="visible";
    }else if(showhide == "hide"){
      document.getElementById('popupbox').style.visibility="hidden";        
    }   
 }

#popup的css是

#popupbox{ 
  padding:0; 
  margin: 0px auto; 
  background:white;
  border: solid #000000 1px; 
  z-index: 9000; 
  font-family: arial; 
  visibility: hidden; 
 }

和html是

<div id="popupbox">
  <div class="close"><a href="javascript:edit_box('hide');" >close</a></div>

任何指针都非常感激，因为我不知道从哪里开始，并且只能找到重新启动以在其他地方弹出框的代码

Answer 1

为什么不尝试使用jQuery，jQuery（“＃popupbox”）。hide（）;

Answer 2

将您的风格改为

#popupbox{ 
  padding:0; 
  margin: 0px auto;
  position:fixed;
  top:0; left:0; right:0; bottom: 0;
  display:none;

  background: rgba(255,255,255,0.5);
  border: solid #000000 1px; 
  z-index: 9000; 
  font-family: arial; 
 }

和你的功能

function edit_box(showhide)
{
  if(showhide == "show")
    {
     $('#popupbox').show();
    } else if (showhide == "hide") {
      $('#popupbox').hide();        
    }   
 }

如果您想支持不了解rgba颜色的浏览器，请使用半透明背景.png图像

Answer 3

用

对此进行排序父页面上的

css

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

分层页面上的CSS

.white_content {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        padding: 16px;
        border: 16px solid orange;
        background-color: white;
        z-index:1002;
        overflow: auto;
    }

然后在函数调用弹出层

中的父页面上的js

  document.getElementById('fade').style.display='block'

父页面上的

html div

<div id="fade" class="black_overlay"></div>

弹出图层上的js

 function edit_box(showhide){
    if(showhide == "show"){
    document.getElementById('popupbox').style.display='block';
        document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){
    document.getElementById('popupbox').style.display='none';
    document.getElementById('fade').style.display='none'
        document.getElementById('popupbox').style.visibility="hidden";      
}

}

和图层上的html

<div id="popupbox" class="white_content">
  <div class="close"><a href="javascript:edit_box('hide');" >close</a></div> 
</div>

禁用图层显示的父页面

3 个答案: