禁用除DIV元素以外的所有內容

Question

我有一個div元素的視頻播放器。我想禁用除DIV之外的所有內容。一種方法是使用燈箱，但我想知道如果我可以使用純HTML/Javascript來做到這一點。

Answer 1

我做了簡單的例子給你，

jQuery的;

 $(".disable").on('click', function(){ 
      // * = select All, find Div, Not (#video) and edit css opacity 
      $("*").find('div').not("#video").css('opacity', '0.1'); 

     }); 

HTML;

<button class="disable">Disable</button>  
    <div class="header">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum  has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 

<div id="video"> 
    <img src="http://fandomania.com/wp-content/uploads/2012/04/06/anarchy01.jpg"> 
</div> 

<div class="footer">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 

的CSS;

.header{border:1px solid #000;background:#cc0000;color:#fff;} 
.footer{border:1px solid #000;background:#cc0000;color:#fff;} 

檢查FIDDLE

Answer 2

要真正徹底地跨瀏覽器，你需要一個iframe，你可以動態創建。除了視頻div之外，使iframez-index高於頁面上的其他任何內容，使iframe爲視口/頁面的完整大小，然後使視頻div高於z-index。現在，除視頻div以外的所有點擊都會轉到iframe，這可能會忽略它們。如果您想「淡出」頁面的其餘部分，也可以在iframe上使用不透明度。

大致來說：

function maskAllExcept(div) { 
    var iframe = document.createElement('iframe'); 
    iframe.style.position = "absolute"; 
    iframe.style.left = iframe.style.right = iframe.style.top = iframe.style.bottom = "0"; 
    iframe.style.zIndex = 1000; 
    div.style.zIndex = 1001; 
    document.body.appendChild(iframe); 
} 

Answer 3

這可能會幫助你

<table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
     <td> 
      <div id="popup" class="popup"> 

       <div id="large_map_canvas" style="width:550px; height:550px;" align="right"><iframe align="center" src="your url for video" style="width:545px; height:523px; overflow:hidden;"></iframe></div> 
      </div> 
       <a href="javascript:void(0)" onclick="showPopup();">Click to view larger map </a> 
     </td> 
    </tr> 
</table> 

<div id="mainDiv" class="businessDetail-backStyle" style="display:none;"> </div> 


<script type="text/javascript"> 

    function showPopup() { 
     document.getElementById('popup').style.display = 'block'; 
     document.getElementById('mainDiv').style.display = 'block'; 
    } 

    function hidePopup(){ 
     document.getElementById('popup').style.display = 'none'; 
     document.getElementById('mainDiv').style.display = 'none'; 
    } 

</script> 

<style type="text/css"> 
    .popup { 

    position:absolute; 
    top:0%; 
    left:37%; 
    margin:-50px 0 0 -100px; 
    padding:11px; 
    display:none; 
    background:#FFF; 
    z-index:9999; 
    } 

    .businessDetail-backStyle 
    { 
background-color: #333333; 
opacity: 90%; 
filter:alpha(opacity=90); 
background-color: rgba(0,0,0,0.737); 
width: 100%; 
height: 100%; 
position: fixed; 
top: 0; 
left: 0; 
color: white; 
z-index:999; 

} 

    </style>