CSS подавляет экран как предупреждение Javascript - PullRequest
Новая
       3

CSS подавляет экран как предупреждение Javascript

1 голос
/ 14 января 2012

Итак, у меня есть скрытый элемент div, который отображается на $(document).ready() и отображает форму для входа или регистрации.Я пытаюсь сделать экран подавленным, как при отображении традиционного предупреждения Javascript.Я нахожусь в фазе тестирования и просто использую класс, который устанавливает непрозрачность для тела, но также применяется к всплывающему элементу div.Я пытаюсь просто установить непрозрачность для всего, что за этим стоит.Вот что у меня есть. 

$("body").not("#overlay").addClass("suppress");

Я пробовал несколько других вариантов, чтобы исключить этот div, но я не уверен, что это возможно, так как я подаю заявку на body.Есть ли у вас и предложения, чтобы привести меня в правильном направлении?

1 Ответ

2 голосов
/ 14 января 2012

Вы должны установить #overlay div следующим образом: 

#overlay {
     width: 100%;
     height: 100%;
     position:fixed;
     z-index: 1000;
     background: rgba(255, 255, 255, 0.7)
}

Полупрозрачное наложение белого фона будет иметь тот же эффект, что и уменьшение непрозрачности тела.В качестве альтернативы вы можете использовать полупрозрачное фоновое изображение размером 1 на 1 пиксель .png вместо rgba.

Затем вы можете использовать другой div внутри #overlay, который будет центрировать форму: 

#overlay .inner {
     width: 200px;
     height: 200px;
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -100px 0 0 -100px
}

Таким образом, вам не нужно беспокоиться об изменении CSS любого другого элемента.

Чтобы прокомментировать подход, который вы упомянули в своем ответе:

Насколько я понимаю, ваш текущий код говорит: "найдите любой элемент тела, у которого нет идентификатора" overlay ", и добавьтекласс 'suppress' "... другими словами, not () применяется только к набору соответствующих элементов.Если вы хотите изменить непрозрачность всех элементов , кроме #overlay, вы можете сделать следующее: 

<body>
     <div id="overlay">
          overlay stuff in here
     </div>

     <div id="other-content">
          All page content in here
     </div>
</body>


$(document).ready(function(){
     $('#other-content').addClass('suppress');  
});
...