===
Яндекс ШРИ - Задача с попапами
ДЕМО: http://plnkr.co/edit/GiJzyHWNdrNnjthFb5uU?p=preview
=== Вариант 1 ===
Вариант, при котором все элементы попапа заранее размещаем в DOM дереве. Попап реализуем через position:absolute. Использовал модульный подход через функцию конструктор. Все параметры заранее оговорены внутри класса, без возможности их менять.
Плюсы:
- легко и быстро реализовать
- хорошая расширяемость и поддержка кода благодоря модульной структуре
- разделены контролер и отображение за счет отдельного использования классов для CSS и data- атрибутов для управления
- есть возможность все еще скролить страницу - если нам понадобиться что-нибудь на ней посмотреть
Минусы:
- захламление DOM еще до того, как нам понадобился попап
- захламление DOM при необходимости на странице нескольких попапов
- страница скролиться вместе с попапом, чтобы вернуться к попапу нужно скролить обратно
- отсутствует настройка плагина, все управляющие атрибуты заданы внутри модуля, без возможности их поменять
=== Вариант 2 ===
Вариант, при котором все элементы попапа заранее размещаем в DOM дереве. Попап реализуем через position:fixed. Использовал модульный подход через функцию конструктор и свойство prototype. При инициализации объекта класса, можно задать свойства работы попапа.
Плюсы:
- хорошая расширяемость и поддержка кода благодоря модульной структуре
- разделены контролер и отображение за счет использования разных классов CSS для стилей и управления
- возможность задание нужных параметров через объект передаваемых свойств при инициализации
Минусы:
- захламление DOM еще до того, как нам понадобился попап
- захламление DOM при необходимости на странице нескольких попапов
- для реализации такого варианта требуется чуть больше времени
=== Вариант 3 ===
Вариант, при котором для формирования попапов используется javascript шаблонизатор. В данном примере используется lodash.
Плюсы:
- изначально попапы отсутствуют в DOM дереве, так как тэг script с неправильным type игнорируется при постороении DOM
- разделено отображение оболочки попапа и его контентной части, следовательно не дублируются однотипные элементы в коде
Минусы:
- требуется больше времени на реализацию
- невалидность верстки из-за некорректного атрибута type у script
=== Дополнительно ===
Так же возможны и другие способы реализации, которые не отображены в данных примера:
- использовать CSS3 анимацию вместо javascript анимации
- использовать подгрузку попапов целиком или их контентной части по средством AJAX технологии
- реализовать данный модуль ввиде jquery плагина