0

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

类似于灯箱画廊

我通过按钮（编辑）单击从父页面调用图层中的函数

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>

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

4

3 回答 3

0

改变你的风格

#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 图像

于 2013-04-16T13:40:45.760 回答
0

好的，解决了这个问题

父页面上的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>
于 2013-04-16T14:47:15.717 回答
0

你为什么不试试jQuery，jQuery（"#popupbox"）.hide();

于 2013-04-16T13:06:00.053 回答