Question

CSS

.myoverlay
        {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.7); 
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            opacity: 0.5;
        }

HTML

   <html>
    <head></head>


    <body>    

    <div id="MyDiv">
    //some content
    </div>

    </body>


    </html>

的jQuery

$(function(){

 $("body").not('#MyDiv').addClass("myoverlay");


});

这里我想将叠加层应用于除MyDiv之外的正文。上面显示的代码正在应用包含MyDiv的完整正文的叠加层。

Answer 1

这是代码！这是你想要的吗？

<html>
            <head>
                <title></title>
                <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
                <style>
                    .myoverlay:not(#MyDiv) {
                        position: absolute;
                        background-color: rgba(0, 0, 0, 0.7);
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        opacity: 0.5;

                    }
                    #MyDiv {
                        width: 200px;
                        height: 200px;
                        background: White;
                        z-index: 10;
                    }
                </style>
            </head>
            <body>
                <div class="wrapper">
                    <div id="MyDiv">
                        <div>

                        </div>
                    </div>
                </div>
            </body>
            <script>
                $(function () {
                    $('.wrapper').addClass('myoverlay');
                });
            </script>
        </html>

Answer 2

通过添加具有叠加层并从中排除所需部分的div，您可以仅使用css

.overlay:not(.exclude){
  background-color: rgba(0,0,0,0.5);
  padding-top:2em;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.exclude {
  background-color: white;
  border-radius: 50%;
  z-index: 100;
  padding: 15px !important;
  margin-left: 25px;
}

<div style="padding:20px" class="overlay">

  <h2>Overlay</h2>
  <p>Add an overlay effect to the page content </p>
  
  <button  class="exclude">Turn on overlay effect</button>
</div>

将叠加添加到除元素之外的正文

2 个答案: