禁用除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>