http://prorab-service.ru/new1/mastera/almaznayarezka/almaznayarezka.php Помогите разобраться с модальным окном Нужно чтобы при нажатии на телефон модальное окно появлялась по центру монитора. В данный момент он приклеивается к верху браузера Только на css Нужно сделать модальное окно как на этом сайте php.ru при клике не имя пользователя
@denis01 модальное окно есть только не корректно работает на моем сайте, может она конфликтует с другими стилями
@Ruslanpro, у Вас установлено для модального окна position: relative а должно быть fixed. Чтобы по центру было используйте для top значение calc(50vh - 150px), где 50vh - это 50% от высоты окна, а 150px - это половина от высоты блока (300px)
смысл выравнивания по центру, хоть по вертикали, хоть по горизонтали, в том, что ты сдвигаешь, например, левую часть окна от левой стенки браузера на 50% ширины окна браузера, а потом сдвигаешь в другую сторону на 50% ширины окна. Это я горизонтальное выравнивание описал. Maputo выше описал вертикальное выравнивание.
@TeslaFeo, у него просто высота и ширина модального окна по 100% установлена. После применения fixed растягивается под размер окна Вот и не получается у человека.
Код (Text): /*---------Модальное окно----------*/ .modalwindow{ width:100%; height:100%; position:relative; display:none; pointer-events:none; background:rgba(0,0,0, .9); z-index:9999; } .modalwindow:target{ pointer-events:auto; display:block; } .window{ width:80%; height:150px; margin:0 auto; padding:0; position:fixed; top:150px; border-radius:5px; background:#ffffff; z-index:99999; } Код (Text): <div class="modalwindow> <div class="window"> <p>....</p> </div> </div> modalwindow - полупрозрачный фон который должен растянуться по ширине и высоте всей страницы window - само окно которая должна позиционироваться Тут как я понял идет конфликт с стилями div в котором это модальное окно находится --- Добавлено --- @Maputo ширина и высота 100% это у полупрозрачного фона
@Ruslanpro, тут можно уже догадаться. для полупрозрачного фона: Код (CSS): width: 100%; height: 100%; position: fixed; top: 0; left: 0; Для окна: Код (CSS): width: 80%; height: 300px; position: relative; top: calc(50% -150px); margin: 0 auto;