添加覆盖到全身除元素

2013-11-26 79 views 0 likes

.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"); 


});

在这里，我想申请的overla除MyDiv之外的身体。上面显示的代码是应用包括MyDiv在内的整个身体的叠加。

来源

2013-11-26 Billy

我认为一个更好的解决方案是获得'div'的位置并将其绝对置于身体之上。然后，您可以将覆盖图类应用于主体（或覆盖特定的元素），并只保留要在其上突出显示的div。 –

如果您还在原始元素过去添加了占位符元素，那么您还保留了布局。例如：http://jsfiddle.net/3fzLA/（注意该按钮在蓝色框下方仍可见）。 –

哪个'div'？你正在使用哪种浏览器？ –

回答

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

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

来源

2013-11-26 07:20:48 HICURIN

请解释您的解决方案为何解决问题。仅发布代码通常不是很有帮助。 –

好的。我没有在body标签中添加class .myoverlay，而是将它添加到名为wrapper的类中。和类.myoverlay我只是修改如.myoverlay：不（#MyDiv）。和我写的$（'。wrapper'）。jQuery代码addClass（'myoverlay'）; – HICURIN

添加覆盖到全身除元素

回答

相关问题