установить черный фон с непрозрачностью 50%

Question

Итак, у меня есть этот div #welcome, который запускает этот код

if ($.cookie('20120129') != '1') {
    $('#welcome').slideDown('slow');
    $.cookie('20120129', '1', { expires: 20 }); 
}

#welcome{
  position: absolute; z-index:100;
  background: #fff; color: #000;
  border: 1px solid black;
  display: none;
  width: 1000px;
  margin: 0 auto;
}
#welcome p{padding: 100px;}

Мне было интересно, как установить фоновый слой между #welcome и страницей с прозрачностью 50%, как, например, Thickbox /Colorbox ...

Answer 1

Добавить фиксированный оверлей, который по умолчанию скрыт и отображается, когда вам это нужно.Вы можете либо добавить это в свою HTML-структуру самостоятельно, либо использовать Jquery для ее добавления.Лично я бы добавил его в структуру HTML.

Элемент .overlay должен иметь z-index ниже #welcome, но выше, чем любые другие элементы, которые он должен охватывать:

.overlay {
    background-color: #000;
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity = 50); /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99;
}

Обновлен Jquery для добавления / отображения оверлея div:

//add overlay if it does not exist
if( $('.overlay').length == 0 ){
    $('body').append('<div class="overlay"></div>');
} 
if ($.cookie('20120129') != '1') {
    $('.overlay').show();
    $('#welcome').slideDown('slow');
    $.cookie('20120129', '1', { expires: 20 }); 
}

Answer 2

приветствуем z-индекс 999 Создайте еще один div с размером вашего тела с z-индексом 998. Для непрозрачности вы можете просто добавить непрозрачность 0,5:)

Answer 3

В основном вы просто предоставляете абсолютно позиционированный div с фоном rgba (0,0,0,0.5) или непрозрачностью 0,5.Z-индекс наложения должен быть меньше, чем у элемента приветствия:

#welcome {
   z-index: 999;
}

#overlay {
   background: rgba(0,0,0,0.5);
   bottom: 0;
   left: 0;
   position: absolute;
   top: 0;
   right: 0;
   z-index: 998;
}