Добавление наложения на теле, за исключением элемента

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


});

Здесь я хочу, чтобы применить overla y к телу, кроме MyDiv. В приведенном выше коде применяется наложение для полного тела, включая MyDiv.

источник

2013-11-26 Billy

Я думаю, что лучшим решением было бы получить положение «div» и установить его абсолютное над телом. Затем вы можете применить класс overlay к телу (или к специальному элементу оверлея) и просто сохранить 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

Пожалуйста, объясните, почему ваше решение решает проблему. Обычно код проводки не очень полезен. –

Хорошо. Вместо добавления класса .myoverlay в тег body я добавил его в div с классом с именем wrapper. И класс .myoverlay Я просто изменил, как .myoverlay: not (#MyDiv). И код jquery, который я написал $ ('. Wrapper'). AddClass ('myoverlay'); – HICURIN

Добавление наложения на теле, за исключением элемента

ответ

Смежные вопросы