在圖層上禁用父頁面

我有一個隱藏層，當用戶單擊按鈕時，圖層被設置爲顯示。我怎樣才能使父頁面被禁用/灰色，直到該層已關閉（設置爲隱藏）在圖層上禁用父頁面

類似收藏畫廊

我調用一個函數在用戶無法點擊父頁面上的任何內容從一個按鈕（編輯）父頁面的點擊層

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";   
    } 
}

的CSS爲#popu層上p是

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

不勝感激，因爲我不知道從哪裏開始就這一個，只能找到代碼relivent到別處彈出框任何指針在線

來源

2013-04-16 Barry Watts

爲什麼不試試jQuery，jQuery（「＃popupbox」）。hide（）;

來源

2013-04-16 13:06:00 pconline2046

沒有彈出框上是在該層上。我希望圖層下方的父頁面變灰。我目前在頁面上使用jquery來處理其他事情，所以我正在尋找一個jQuery/jscript代碼位 –

你改變風格

#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顏色的瀏覽器，然後用半透明背景巴紐image

來源

2013-04-16 13:40:45

ok用

整理出來個

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; 
    }

則函數內調用彈出層父頁面

上

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

HTML DIV父頁面上的JS上

<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-16 14:47:15

在圖層上禁用父頁面

回答

相關問題