Как reddit делает весь фон черноватым, когда появляется форма входа?

Question

когда вы нажимаете на кнопку регистрации Reddit, появляется хорошее окно, а остальная часть экрана становится черноватой. Вы можете нажать на остальную часть экрана, чтобы закрыть всплывающее окно.

Я знаю, что мог бы использовать для этого самый внешний div, но разве это делает reddit? меняют ли они атрибуты этого внешнего div на лету?

Answer 1

Этот метод известен как overlay и довольно прост в реализации:

#overlay {
    position: fixed;
    z-index:103;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background-color: gray;
    opacity: 0.7;
}

Полный акт его показа известен как модальное окно .

Посмотрите живой пример CSS выше .

Однако, учитывая все обстоятельства, чтобы иметь плавающий DIV с формой и тому подобным, вы захотите использовать один из множества плагинов, уже созданных для этого, например Thickbox или jqModal .

Answer 2

Они создают элемент div со следующими свойствами CSS:

/* Makes div cover page */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;

/* Puts div over all other elements on page */
z-index: 1000;

/* Fills the div with a solid colour */
background-color: gray;

/* Makes div partially see-through */
opacity: 0.7;

В поле div для поля входа в систему z-index устанавливается значение 1001, так что оно появляется над оверлеем div.

Steve

Answer 3

Они используют плагин, похожий на Thickbox .