Правильные модальные окна
5 июля 2012
Обычно модальные окна и диалоги делаются при помощи плагинов jQuery. Например, SimpleModal или jqModal. К сожалению, все они, в варианте по умолчанию, работают неправильно.
Если окно модальное, то пользователю нельзя позволять прокручивать страницу под ним. При этом, если содержимого в модальном окне очень много, нужно позволить это содержимое прокручивать.
По этому принципу работает просмотр фото в Facebook и Вконтакте.
Для реализации подобного функцианала частенько нагромождают тонны JavaScript, хотя можно обойтись почти чистым CSS (за исключением навешивания одного класса на контейнер).
Немного прокомментирую:
/* Данный класс навешивается на контейнер при открытии модального окна. Для нормальных браузеров это body, для стырах IE — html */ .lock { /* Скрываем скроллбары */ overflow: hidden; } .modal { /* По умолчанию не показываем содержимое модальных окон */ display: none; } .lock .modal { /* Показываем подложку (полупрозрачное затенение) при открытии модального окна */ display: block; /* Саму подложку фиксируем и растягиваем на всё пространство */ position: fixed; bottom: 0; left: 0; top: 0; right: 0; /* Если содержимое модального окна в подложку не влезает — показываем скроллбары */ overflow: auto; }
Комментарии RSS по email OK
отлично
кстати а что подписка на комменты не работает?
В спам наверняка падает. Проверь.
Да, для fancy box такую штуку делал. Хотел написать авторам, но забыл. Думаю надо написать все-таки.
Если для .lock .modal .content проставить нижний маргин, будет чуть поаккуратнее выглядеть. Сейчас длинное модальное окно прилипает к низу.
в IE9 не работает
Кирилл, у меня в IE9 отлично работает. Какая ОС? Как именно не работает?
Здравствуйте, ждал вашего ответа. Я тестировал в IE 9.0.8112, win7. Ничего не происходит при нажатии на ссылку мод.окна, но скрипты отрабатывают js код полностью. Сам код взял со страницы примера. В остальных браузерах все ок. Очень понравилось Ваше решение, помогите пожалуйста разобраться.
Попробовал запустить пример с вашей странице в IE 9 - действительно работает. не требуется ли еще какие библиотеки, кроме страницы с примером.
хз, что сделал, но подшаманил над заголовком и кодировкой страницы и все заработало в ie9. Отличный и главное правильный пример модального окна! Спасибо за статью.
вопрос. как сделать два разных модальных окна не меняя стили?
Для двух придётся чуть нашаманить с JS. А именно с
.show()
иhide()
в зависимости от открываемого окна.Чувствую, нужно оформить это дело в плагин jQuery :)
+1 за плагин, логика работы окна - стоящая, раньше не задумывался, но сейчас кажется очевидным - что иная логика не верна :)
Даже в twitter bootstrap работает не правильно.
я решил проблему с несколькими окнами так:
Единственное с чем приходится мириться в таком подходе - это смещение контента при наличии скроллабара на его ширину. лично у меня всякие уловки с js по его позиционированию так и не сработали. но повторюсь, эти окна лучшие что я видел.
Нашёл неприятный момент со скроллом на iPad. Надо будет подумать, как с ним бороться.
Круто :) Спасибо :) Небольшой недочёт, если открыть диалог, и затем нажимать стрелки, то будет прокручиваться не открытый диалог, а сама содержимое страницы. Такое поведения связано с тем, что фокус установлен на элемент, расположенный на самой странице. Если же, после открытия установить фокус на диалог, то всё работает.
MaXL, как именно удалось фокусом победить это? У меня не выходит.
iPad имеет баг: когда input в фокусе и скроллим document, игнорирутеся position:fix подложки. Лечится только растягиванием подложки на высоту document, следует подложка должна быть на уровне body.
bars3s, немного не понял. Что за input?
А чем плохо то что страница будет скролиться при открытом модальном окне? По-моему на много хуже то, когда сайт выровненный по центру дергается вбок при открытии/закрытии модального окна. Спасибо.
Илья, этот эффект можно исправить. Плохо тем, что скролл не соответствует содержимому.
А как сделать как на вк? Так же overflow:hidden, но если размер модального окна больше чем высота вьюпорта, то появляется небольшой скролл.
Илья, моё решение так и работает.
Есть проблема. Если ширину body не фиксировать, то при достаточном наличии контента внутри он начинает прыгать на ширину исчезнувшего при открытом попапе скролла. Очень заметно бывает, если на body повешен, например, фоновый рисунок. Фикс пока не придумал
fromanywhere, знаем. Решим.
А есть новости по решению проблемы прыгающего контента на ширину скроллбара?
Veitor, нет. На данный момент я не использую окошки у себя в проектах, поэтому решение отложил.
Эффекты модальных окон siteacademy.ru/index.php/css/39-css/modal-window-effects
Здравствуйте! Великолепное решение! Спасибо за него. Вот подскажите, пожалуйста, у меня много контента и айди вот такой <?=$products['goods_id']?> но как сделать, чтобы окно работало под каждый айди я не смог. Подскажите решение. Буду благодарен!
И ещё забыл спросить.. Как сделать так, чтобы окно можно было закрыть не только крестиком, но и при клике в любое место экране, кроме самого окна разумеется.
Я разобрался! Большое спасибо за отличный скрипт! Вы не зря стараетесь. Успехов вам.