Создаем правильное модальное окно на jQuery
Давайте научимся с вами создавать модальные окна. Ведь нередко они очень нужны для наших сайтов.
Как должно выглядеть правильное модальное окно? На мой взгляд, при появлении модального окна, остальной контент должен затемняться - чтобы внимание посетителя было сконцентрировано на содержимом этого самого модального окна - это раз. Два - модальное окно должно закрываться только при клике по кнопке закрыть (если такая кнопка есть), если кнопки нет, то при клике вне области модального окна. Три - контент на заднем фоне (да, да - затемненный) не должен прокручиваться и реагировать на изменение положения колеса мыши, если присутствует полоса прокрутки на странице. И четыре - модальное окно должно красиво появляться, быть красиво оформленным, вписываться в общий дизайн сайта и может содержать любую информацию - текст, картинки, видео - все, что душе угодно. Кроме того, при открытии модального окна, в адресной строке не должно появляться никаких приписок вида: #modalwindow - это полный бред и так делать не надо. Ну, вроде все требования озвучены и можно приступать к разработке? Практически...
Сегодня я решил не изобретать новый велосипед, а потому кода, демо и архива не будет. Но зато я дам вам ссылку на уже существующий JQuery-скрипт модального окна, который полностью удовлетворяет наши требования. С помощью этого скрипта можно сделать модальное окно и под иные требования. В общем на выходе мы будем иметь классный, гибкий скрипт с кучей настроек. Примеры и документация присутствуют. Надеюсь, разработчики продолжат развивать его и не забросят проект.
Итак, правильные модальные окна находятся здесь.