Как сверстать модальное окно?

Question

[Иван Дрожжин]

Верстаю лендинг. Заказчик попросил сразу сверстать модальные окна, которые появяться при нажатии на те или иные объекты.
Где верстать эти модальные окна? В самом index.html или создавать для них отдельные страницы? Что делать, в общем?))

Comments

[Кирилл]

Боюсь даже представить, что вы за лендинг верстаете, раз такие вопросы задаете.

Answer 1

[dm]

Например, так:

1. Верстаешь окно;
2. Располагаешь его в самом верху html, под body;
3. Делаешь ему display: none;
4. Создаешь в css дополнительное правило - .popup-show { display: block; };
5. По нажатию на кнопку добавляешь окну класс .popup-show;
6. Добавляешь анимацию появления окна.

Добавить класс можно с помощью js в пару строк:
Как навесить обработчик на коллекцию элементов?
Как оптимизировать данный код (открытие/закрытие всплывающих окон)?

Answer 2

[Кирилл Туровников]

Вот простейший пример реализации jsfiddle.net, закрывается по кнопке и при клике вне попапа.
Если размеры заранее не известны то можно еще добавить функцию которая определяет высоту и при ресайзе центрует попап.
Если попапов очень много можно использовать у ссылок data атрибут, например data-target="callback", c именем целевого попапа и добавить соответствующую подстановку в функцию появления.

Answer 3

[Кирилл]

На пример, arcticlab.ru/arcticmodal
Так же есть куча других, которые элементарно гуглятся.