Как реализовывается всплывающие окна с затемнением страницы?

Question

[Александр Шахматов]

Подскажите как реализовываются окна с затемнением страницы, как сделано это к примеру на сайте додопиццы, что бы в всплывающем окне была картинка, текст и кнопка

Answer 1

[virtualhero]

или берешь готовые решения, или сам реализовываешь, все очень просто. но это настолько типичная и рутинная задача, что обязательно начни пользоваться каким-нибудь фреймворком, сам недавно писал все руками, пока в один прекрасный момент не зае.....

https://jsfiddle.net/a0qqbzf3/42/

Answer 2

[M-ka]

на всю ширину/высоту экрана делается блок в фоне которого полупрозрачная картинка..(это более правильный вариант, чем залить фоном и наложить опасити или более хужым вариантом в виде задания прозрачности в фоне), ну а попап имеет более высокий уровень, нежели у картинки. Клик можно повесить на картинку (если всегда такая присутствует) для закрытия попапов ну или повесить проверку и детектить по чем кликнули и проверять, входит ли в состав попапа.

Comments

[Danila]

"полупрозрачная картинка..(это более правильный вариант, чем залить фоном и наложить опасити или более хужым вариантом в виде задания прозрачности в фоне)"
представить себе не могу ситуацию, в которой КАРТИНКА - "более правильный вариант"

[M-ka]

Данила: эта ситуация, называется ИЕ + мобильные браузеры + тв.
Проблема в ИЕ, не помню до или в какой версии, если задать через баграунд, оно прокликивается, в зис таргета возвращается более нижний слой. Такая же проблема была на андроидах и некоторых "вумных" теликах ранних версий. Пока Вам, уважаемый, приходится представлять эти проблемы, с чем затруднения, мне приходилось на них наступать и вступать... Немного другие траблы были с опасити для слоя или использования rgba.

[virtualhero]

M-ka: вы, уважаемый, наверное очень древний, поищите наконец-то в интернете, какие браузеры в 2017 году стоит брать во внимание при верстке. а вообще не парьтесь, я шуткую на счет древности) картинки вообще не используйте там, где можно обойтись без них)

[M-ka]

virtualhero: если делать только сайты визитки или какашкосайты, то да, можно брать только под последние браузеры, но не корпоративный сегмент или под сервисы с большой нагрузкой или которые должны просто работать на любой платформе... В зависимости от областей и требований выдвинутых заказчиком, как пример, даже в текущее время есть необходимость поддерживать ИЕ7 при разработке определенных ресурсов. Бывают и случаи, что надобность даже в ИЕ6 или от определенной версии хромоподобных... т.к. только из-за того, что исполнитель не может реализовать задачу, ни кто не будет делать обновление парка железок всех филий... а просто сменят исполнителя на того, которому под силу поставленная задача... и это не шутка, а реалии жизни

Answer 3

[Артур Карапетян]

fancybox или magnific popup