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

Question

我在一个div元素中有一个视频播放器。我想禁用除了DIV之外的所有东西。一种方法是使用lightbox，但我想知道是否可以使用纯HTML / Javascript来实现。

- kosta

---

你可能想在这里展示一些代码吗？ - Severin

额，您在这里想做什么？ - Fizor

创建一个遮罩层，将其放置在z-index超过9000的位置，完成。 - DarkBee

你可以使用CSS类来实现这个。 - Ricky

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

Check FIDDLE

- mehmetakifalp

---

请注意，这并不适用于一般情况：您最终会为#video的祖先设置opacity:0.1。 - Geert-Jan

Answer 2

要彻底地实现跨浏览器，您需要一个可以动态创建的iframe。将iframe的z-index设置为页面上除视频div之外的所有元素的最高值，并将iframe设置为整个视口/页面的全尺寸，然后将视频div设置为更高的z-index。现在，除了视频div上的点击之外，所有点击都会转到iframe，而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);
}

- T.J. Crowder

Answer 3

使用纯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/

希望这对未来的技术人员有所帮助 :)

- gengns

Answer 4

这可能会对你有所帮助

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

- Ricky