Как правильно делать popup?

Question

[godsplan]

Правильно ли будет делать верстку блока-попапа где то на главной странице(где лучше всего?) и скрывать его через css, а потом открывать? Какие свойства лучше всего задать такому попапу, чтобы он всегда был по центру высоты экрана?
Или лучше это все как то рендерить через js?

Answer 1

[Andrew]

блока-попапа где то на главной странице(где лучше всего?) и скрывать его через css

так обычно и делают.
А про лучшую реализацию посмотрите как сделаны у fancybox и magnific можно втупую забрать их стили

Answer 2

[micvor]

position: fixed;
top: 40%; //в зависимости от высоты попапа.
Размещайте где угодно, смотря зачем его используете. У меня, например, используется для выведения развернутой информации по пункту (ссылке на попап). Это на рядовых страницах. Регистрация/вход - на главной. И ли может не понял вопроса.

Answer 3

[xonar]

Создаётся блок с position: fixed; top, left и т.д. параметрами где бы вы хотели чтоб блок выглядывал. Даёте блоку display: none;

Дальше вам нужно будет написать небольшой кусочек JS, что при клике на какой-то элемент вам нужно повесить класс popup-active на этот блок и он успешно появится, а при нажатие на крестик или ещё куда-нибудь он успешно закроется.

popup-active в css дайте display: block;

Если же хотите чтоб Поп-Ап сразу появился на сайте, то делайте тоже самое что я описал выше, только немного наоборот. Сначала поп-ап даёте display: block; а при нажатие на крести или ещё куда-нибудь, навешиваете ему класс popup-off.

У popup-off разумеется задаёте display: none;

Очень легко это.