0

Собственно хотел реализовать своего рода "модальное окно" (+ что бы задний фон подключался соответсвующим блоком).С такими стилями сделал блок, но проблема в том что цвет накладывается на все окно браузера, кроме строчных блоков внутри контейнера страницы

css

.background_transparent{
    position:absolute;
    top:0px;
    bottom:0px;
    right: 0px;
    left:0px;
    background: rgba( 255, 255, 255, 0.6);   
}

причем в спецификации к background указано что " применяется ко всем элементам" пример https://jsfiddle.net/dirkdirk/zh10yfma/

2
  • Непонятно к чему не применяется. Примерчик покажите.
    – user194374
    21 янв 2016 в 9:53
  • добавил фидл в вопрос
    – ddeadlink
    21 янв 2016 в 9:58

1 ответ 1

2

Здравствуйте! По клику на любой элемент, который открывает Ваше модальное окно, Вам нужно создать div, который будет реализовывать затемнение, со следующими css свойствами:

position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%; //растянули по всему экрану
z-index: 10;
opacity: 0.75; //добавим прозрачности, чтобы было видно страничку
backgrond-color: #000 //тут цвет фона (тёмный обычно)

Т.е. этот div всегда должен быть в структуре (можно конечно и ajax подгружать:)), просто по-дефолту ему display: none. а когда должно появиться модальное окно - этому ДИВУ делаете display: block.

под ним уже делаете блок, именно модального окна

margin: 0px;
position: absolute;
z-index: 11; //его z-index должен быть выше, чем у блока, создающего тёмный фон
top: 357px;
left: 406px;

В итоге получаем:

<div class="Я ДЕЛАЮ ТЁМНЫЙ ФОН"></div>
<div class="Я МОДАЛЬНОЕ ОКНО"></div>
2
  • спасибо Вам за труды ) со стилями и самой идеей я в курсе как делать, а вот z-index забыл, и они помогли)
    – ddeadlink
    21 янв 2016 в 10:10
  • Рад помочь) Успехов Вам!
    – gentledev
    21 янв 2016 в 10:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.