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 に答える