Задать вопрос
@maximka_l
css

Как сделать затемненный фон css?

Всем добрый день. Пытаюсь сделать модальное окно с затемнением.
Все сделал, но вот затемнение не работает.

Подскажите пожалуйста куда рыть?

Код html:

<!-- Модальное окно №5 -->
        <a href="#x" class="overlay" id="win5"></a>
        <div class="popup">
<img class="is-image" src="vidjet_podkluchi_druga-01.png" alt="" />
<a class="close" title="Закрыть" href="#close"></a>
        </div>


Стили:
* Форимируем слой затемнения фона */
.overlay {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
/* Позиционирум медиа-элементы внутри окна */
.is-image {
  width: 100%;
  display: inline-block;
  height: auto;
  margin: auto;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  top: 0; left: 0; bottom: 0; right: 0;
}
embed, iframe {
  width: 100%;
  min-width: 320px;
  max-width: 600px;
 
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}
/* Формируем и позиционируем всплывающее окно */
.popup { 
    min-width: 320px;
    max-width: 600px;
    width: 600px;
    margin: auto;
    background-color: #fff;
    border: 3px solid #fff;
    display: block;
    left: 0; right: 0;
    opacity: 0;
    padding: 15px;
    position: fixed;
    font-size: 14px;
    top: 0;
    visibility: hidden;
    z-index: 10;
/* Скругление углов окна  */	
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
/* Тень блока окна  */	
    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
/* Устанавливаем эффект перехода появления окна */ 
    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
/* Устанавливаем позицию появления окна */ 
.overlay:target+.popup {
    top: 42%;
    opacity: 1;
    visibility: visible;
}
/* Оформляем и позицонируем кнопку закрытия */
.close {
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #ccc;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: -13px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;padding: 0;
    top: -15px;
    width: 24px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 14px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
    margin-bottom: 10px;
}
  • Вопрос задан
  • 17808 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Самая первая строчка закомменчена неправильно, забыли слеш. Поэтому весь класс overlay не работает. Проверил на сайте - то же самое. chelyabinsk.izet.ru/testovik/111.css
Кстати, не называйте файлы одними цифрами, начните с буквы.
/* Форимируем слой затемнения фона */
.overlay {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
/* Позиционирум медиа-элементы внутри окна */
.is-image {
  width: 100%;
  display: inline-block;
  height: auto;
  margin: auto;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  top: 0; left: 0; bottom: 0; right: 0;
}
embed, iframe {
  width: 100%;
  min-width: 320px;
  max-width: 600px;
 
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}
/* Формируем и позиционируем всплывающее окно */
.popup { 
    min-width: 320px;
    max-width: 600px;
    width: 600px;
    margin: auto;
    background-color: #fff;
    border: 3px solid #fff;
    display: block;
    left: 0; right: 0;
    opacity: 0;
    padding: 15px;
    position: fixed;
    font-size: 14px;
    top: 0;
    visibility: hidden;
    z-index: 10;
/* Скругление углов окна  */	
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
/* Тень блока окна  */	
    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
/* Устанавливаем эффект перехода появления окна */ 
    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
/* Устанавливаем позицию появления окна */ 
.overlay:target+.popup {
    top: 42%;
    opacity: 1;
    visibility: visible;
}
/* Оформляем и позицонируем кнопку закрытия */
.close {
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #ccc;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: -13px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;padding: 0;
    top: -15px;
    width: 24px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 14px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
    margin-bottom: 10px;
}

И присвойте z-index как написано ниже, чтобы окно под хедер не залезало.
.overlay:target + .popup {
    opacity: 1;
    top: 42%;
    visibility: visible;
    z-index: 999;
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 2
@maximka_l Автор вопроса
Забыл, пример тут

chelyabinsk.izet.ru/#win5
Ответ написан
Комментировать
Комментировать
@anlamas
для совместимости с IE 7 и выше, лучше пишите так
background: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    opacity: 0.75;
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Создать многостраничный дизайн WEB-приложения (сайта) в бьюти-сфере
27 нояб. 2024, в 22:29
50000 руб./за проект
Разработать приложение для Android и IOS
27 нояб. 2024, в 21:14
70000 руб./за проект
Разработка чат-бота JS + API интеграции
27 нояб. 2024, в 21:08
45000 руб./за проект
Ещё заказы