在html中禁用框架

Question

我有一個頁面，我填充一個彈出屏幕，頁面由一些框架組成，當我點擊一個鏈接時，它必須填充一個彈出窗口，它正確地填充窗口，但html頁面單獨獲取背景在塊和框架不會得到backround塊。

請參閱圖像作爲參考，我也會過去，我使用的文件：

POPUP.JS 

//SETTING UP OUR POPUP 
//0 means disabled; 1 means enabled; 
var popupStatus = 0; 

//loading popup with jQuery magic! 
function loadPopup(){ 
    //loads popup only if it is disabled 
    if(popupStatus==0){ 
     $("#backgroundPopup").css({ 
      "opacity": "0.7" 
     }); 
     $("#backgroundPopup").fadeIn("slow"); 
     $("#popupContact").fadeIn("slow"); 
     popupStatus = 1; 
    } 
} 

//disabling popup with jQuery magic! 
function disablePopup(){ 
    //disables popup only if it is enabled 
    if(popupStatus==1){ 
     $("#backgroundPopup").fadeOut("slow"); 
     $("#popupContact").fadeOut("slow"); 
     popupStatus = 0; 
    } 
} 

//centering popup 
function centerPopup(){ 
    //request data for centering 
    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = $("#popupContact").height(); 
    var popupWidth = $("#popupContact").width(); 
    //centering 
    $("#popupContact").css({ 
     "position": "absolute", 
     "top": windowHeight/2-popupHeight/2, 
     "left": windowWidth/2-popupWidth/2 
    }); 
    //only need force for IE6 

    $("#backgroundPopup").css({ 
     "height": windowHeight 
    }); 

} 


//CONTROLLING EVENTS IN jQuery 
$(document).ready(function(){ 

    //LOADING POPUP 
    //Click the button event! 
    $("#button").click(function(){ 
     //centering with css 
     centerPopup(); 
     //load popup 
     loadPopup(); 
    }); 

    //CLOSING POPUP 
    //Click the x event! 
    $("#popupContactClose").click(function(){ 
     disablePopup(); 
    }); 
    //Click out event! 
    $("#backgroundPopup").click(function(){ 
     disablePopup(); 
    }); 
    //Press Escape event! 
    $(document).keypress(function(e){ 
     if(e.keyCode==27 && popupStatus==1){ 
      disablePopup(); 
     } 
    }); 

}); 

and POPUP.CSS 
#backgroundPopup{ 
display:none; 
position:fixed; 
_position:absolute; /* hack for internet explorer 6*/ 
height:100%; 
width:100%; 
top:0; 
left:0; 
background:#000000; 
border:1px solid #cecece; 
z-index:1; 
} 
#popupContact{ 
display:none; 
position:fixed; 
_position:absolute; /* hack for internet explorer 6*/ 
height:384px; 
width:750px; 
background:#FFFFFF; 
border:2px solid #cecece; 
z-index:2; 
padding:12px; 
font-size:13px; 
overflow:scroll; 
} 
#popupContact h1{ 
text-align:left; 
color:#333; 
font-size:20px; 
border-bottom:1px dotted #D3D3D3; 
padding-bottom:5px; 
margin-bottom:20px; 
} 
#popupContactClose{ 
font-size:14px; 
line-height:14px; 
right:6px; 
top:4px; 
position:absolute; 
color:#6fa5fd; 
font-weight:700; 
display:block; 
cursor:pointer; 
} 
#button{ 
text-align:center; 
} 

and the html : 

<div id="popupContact"> 
    <a id="popupContactClose"><img src="images/x.png" alt="X" /></a> 
    <h1>Reports</h1> 
    <table border="0" width="100%" cellpadding="0" cellspacing="0"> 
     <thead> 
      <tr> 
       <th class="header">Sl. No</th> 
       <th class="header">Checkbox</th> 
       <th class="header">Size</th> 
       <th class="header">Display</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td><input type="checkbox" name="check" id="check" /></td> 
       <td><input type="text" value="" /></td> 
       <td><input type="text" value="" /></td> 
      </tr> 
      <tr class="odd"> 
       <td>2</td> 
       <td><input type="checkbox" name="check" id="check" /></td> 
       <td><input type="text" value="" /></td> 
       <td><input type="text" value="" /></td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td><input type="checkbox" name="check" id="check" /></td> 
       <td><input type="text" value="" /></td> 
       <td><input type="text" value="" /></td> 
      </tr> 
      <tr class="odd"> 
       <td>4</td> 
       <td><input type="checkbox" name="check" id="check" /></td> 
       <td><input type="text" value="" /></td> 
       <td><input type="text" value="" /></td> 
      </tr> 
      <tr> 
       <td>5</td> 
       <td><input type="checkbox" name="check" id="check" /></td> 
       <td><input type="text" value="" /></td> 
       <td><input type="text" value="" /></td> 
      </tr> 
      <tr class="odd"> 
       <td>6</td> 
       <td><input type="checkbox" name="check" id="check" /></td> 
       <td><input type="text" value="" /></td> 
       <td><input type="text" value="" /></td> 
      </tr> 
      <tr> 
       <td>7</td> 
       <td><input type="checkbox" name="check" id="check" /></td> 
       <td><input type="text" value="" /></td> 
       <td><input type="text" value="" /></td> 
      </tr> 
      <tr class="odd"> 
       <td>8</td> 
       <td><input type="checkbox" name="check" id="check" /></td> 
       <td><input type="text" value="" /></td> 
       <td><input type="text" value="" /></td> 
      </tr> 
      <tr> 
       <td>9</td> 
       <td><input type="checkbox" name="check" id="check" /></td> 
       <td><input type="text" value="" /></td> 
       <td><input type="text" value="" /></td> 
      </tr> 
      <tr class="odd"> 
       <td>10</td> 
       <td><input type="checkbox" name="check" id="check" /></td> 
       <td><input type="text" value="" /></td> 
       <td><input type="text" value="" /></td> 
      </tr> 
      <tr> 
       <td>11</td> 
       <td><input type="checkbox" name="check" id="check" /></td> 
       <td><input type="text" value="" /></td> 
       <td><input type="text" value="" /></td> 
      </tr> 
      <tr class="odd"> 
       <td>12</td> 
       <td><input type="checkbox" name="check" id="check" /></td> 
       <td><input type="text" value="" /></td> 
       <td><input type="text" value="" /></td> 
      </tr> 
     </tbody> 
    </table>   
</div> 
<div id="backgroundPopup"></div> 

請幫助我如何去了解。

Answer 1

從圖像看來，彈出窗口居中中間框架。所以實際上你沒有得到主窗口的高度和寬度來定位你的彈出窗口。此外，你申請的不透明度..該div不覆蓋整個窗口..它限於你當前的幀我猜..

Answer 2

我不認爲有一個好的方法可以在一個框架集（這是obsolete in HTML 5）中做到這一點。一個窗口可能不會將自己的元素放置在其他窗口頂部。

完成此操作的黑客方法是讓frameset中的所有frames都知道您需要模態行爲，並讓它們各自顯示一個阻塞元素（如您在主框架中所做的那樣）。這可能會發生在您的loadPopup()方法中。

常規的彈出窗口可能是一個更清潔的選擇。

但是，實際上，沒有很好的理由使用框架集，特別是對於圖中的佈局。

^{1 - 作爲一個歷史瑣事點，IE曾經允許一種特殊類型的元素覆蓋，可以覆蓋其他窗口/框架。當黑客使用它來生成一個使用假URL覆蓋瀏覽器地址欄的元素時，這被證明是一個特別糟糕的主意。}