Question

我在div元素中有一个视频播放器。我想禁用除DIV之外的所有内容。一种方法是使用灯箱，但我想知道我是否可以使用纯HTML / Javascript进行。

Answer 1

要真正彻底地跨浏览器执行此操作，您需要iframe，您可以动态创建它。除了视频iframe之外，让z-index div高于页面上的任何其他内容，使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 2

我为你做了一个简单的例子，

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

Answer 4

使用Pure CSS禁用除元素及其后代之外的所有内容。让我们使用可能需要这种行为的通用HTML dialog（如果愿意，可以使用div）

我们只需要添加一个类来避免除body及其子代之外的所有dialog中的指针事件。

body.only-dialog *:not(dialog *) { /* not supported yet */
  pointer-events: none;
}

因为:not仅支持一个简单的选择器，所以我们必须这样做：

body.only-dialog * {
  pointer-events: none;
}

body.only-dialog dialog * {
  pointer-events: all;
}

https://jsfiddle.net/bmntvLfs/

希望对后代有帮助：）

禁用除DIV元素之外的所有内容

4 个答案: