<rmcreative>

RSS

Правильные модальные окна

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;
}

UPD: оформил в плагин jQuery

Комментарии RSS

  1. №6408
    mc-bear
    mc-bear 05 июля 2012 г., 15:28:58

    отлично

  2. №6409
    mc-bear
    mc-bear 05 июля 2012 г., 15:29:35

    кстати а что подписка на комменты не работает?

  3. №6410
    Sam
    Sam 05 июля 2012 г., 15:42:10

    В спам наверняка падает. Проверь.

  4. №6411
    Алексей
    Алексей 05 июля 2012 г., 18:25:39

    Да, для fancy box такую штуку делал. Хотел написать авторам, но забыл. Думаю надо написать все-таки.

  5. №6412
    dec5e
    dec5e 06 июля 2012 г., 0:20:23

    Если для .lock .modal .content проставить нижний маргин, будет чуть поаккуратнее выглядеть. Сейчас длинное модальное окно прилипает к низу.

  6. №6413
    Кирилл
    Кирилл 06 июля 2012 г., 11:32:28

    в IE9 не работает

  7. №6414
    Sam
    Sam 06 июля 2012 г., 13:13:33

    Кирилл, у меня в IE9 отлично работает. Какая ОС? Как именно не работает?

  8. №6415
    Кирилл
    Кирилл 06 июля 2012 г., 14:49:51

    Здравствуйте, ждал вашего ответа. Я тестировал в IE 9.0.8112, win7. Ничего не происходит при нажатии на ссылку мод.окна, но скрипты отрабатывают js код полностью. Сам код взял со страницы примера. В остальных браузерах все ок. Очень понравилось Ваше решение, помогите пожалуйста разобраться.

  9. №6416
    Кирилл
    Кирилл 06 июля 2012 г., 14:52:14

    Попробовал запустить пример с вашей странице в IE 9 - действительно работает. не требуется ли еще какие библиотеки, кроме страницы с примером.

  10. №6417
    Кирилл
    Кирилл 06 июля 2012 г., 15:03:57

    хз, что сделал, но подшаманил над заголовком и кодировкой страницы и все заработало в ie9. Отличный и главное правильный пример модального окна! Спасибо за статью.

  11. №6419
    Кирилл
    Кирилл 06 июля 2012 г., 17:31:20

    вопрос. как сделать два разных модальных окна не меняя стили?

  12. №6420
    Sam
    Sam 07 июля 2012 г., 1:32:28

    Для двух придётся чуть нашаманить с JS. А именно с .show() и hide() в зависимости от открываемого окна.

    Чувствую, нужно оформить это дело в плагин jQuery :)

  13. №6421
    Pavel Polyakov
    Pavel Polyakov 07 июля 2012 г., 2:21:13

    +1 за плагин, логика работы окна - стоящая, раньше не задумывался, но сейчас кажется очевидным - что иная логика не верна :)

    Даже в twitter bootstrap работает не правильно.

  14. №6424
    Кирилл
    Кирилл 09 июля 2012 г., 10:14:37

    я решил проблему с несколькими окнами так:

    1. всем окнам раздал свой id.
    2. в .lock .modal убрал св-во "display: block"
    3. в процедуру открытия добавил строку $(win).css('display','block'), где win - параметр имя идентификатора показываемого окна
    4. в процедуру закрытия вписал $('.modal').css('display','none'); работает как часы.
  15. №6425
    Кирилл
    Кирилл 09 июля 2012 г., 10:18:20

    Единственное с чем приходится мириться в таком подходе - это смещение контента при наличии скроллабара на его ширину. лично у меня всякие уловки с js по его позиционированию так и не сработали. но повторюсь, эти окна лучшие что я видел.

  16. №6426
    Sam
    Sam 10 июля 2012 г., 17:42:57

    Нашёл неприятный момент со скроллом на iPad. Надо будет подумать, как с ним бороться.

  17. №6432
    MaXL
    MaXL 11 июля 2012 г., 8:44:40

    Круто :) Спасибо :) Небольшой недочёт, если открыть диалог, и затем нажимать стрелки, то будет прокручиваться не открытый диалог, а сама содержимое страницы. Такое поведения связано с тем, что фокус установлен на элемент, расположенный на самой странице. Если же, после открытия установить фокус на диалог, то всё работает.

  18. №6440
    Sam
    Sam 13 июля 2012 г., 17:31:27

    MaXL, как именно удалось фокусом победить это? У меня не выходит.

  19. №6446
    bars3s
    bars3s 13 июля 2012 г., 20:37:59

    iPad имеет баг: когда input в фокусе и скроллим document, игнорирутеся position:fix подложки. Лечится только растягиванием подложки на высоту document, следует подложка должна быть на уровне body.

  20. №6449
    Sam
    Sam 15 июля 2012 г., 2:37:41

    bars3s, немного не понял. Что за input?

  21. №6455
    Илья
    Илья 18 июля 2012 г., 23:24:42

    А чем плохо то что страница будет скролиться при открытом модальном окне? По-моему на много хуже то, когда сайт выровненный по центру дергается вбок при открытии/закрытии модального окна. Спасибо.

  22. №6456
    Sam
    Sam 19 июля 2012 г., 11:37:06

    Илья, этот эффект можно исправить. Плохо тем, что скролл не соответствует содержимому.

  23. №6457
    Илья
    Илья 19 июля 2012 г., 22:09:20

    А как сделать как на вк? Так же overflow:hidden, но если размер модального окна больше чем высота вьюпорта, то появляется небольшой скролл.

  24. №6458
    Sam
    Sam 20 июля 2012 г., 3:18:32

    Илья, моё решение так и работает.

  25. №6577
    fromanywhere
    fromanywhere 15 авг. 2012 г., 13:58:27

    Есть проблема. Если ширину body не фиксировать, то при достаточном наличии контента внутри он начинает прыгать на ширину исчезнувшего при открытом попапе скролла. Очень заметно бывает, если на body повешен, например, фоновый рисунок. Фикс пока не придумал

  26. №6579
    Sam
    Sam 15 авг. 2012 г., 14:38:36

    fromanywhere, знаем. Решим.

  27. №8109
    Veitor
    Veitor 27 июня 2013 г., 3:21:18

    А есть новости по решению проблемы прыгающего контента на ширину скроллбара?

  28. №8110
    Sam
    Sam 27 июня 2013 г., 13:49:05

    Veitor, нет. На данный момент я не использую окошки у себя в проектах, поэтому решение отложил.

  29. №9186
    Valery
    Valery 25 сент. 2014 г., 9:49:37

    Эффекты модальных окон siteacademy.ru/index.php/css/39-css/modal-window-effects

  30. №11076
    Вячеслав
    Вячеслав 15 сент. 2017 г., 17:10:25

    Здравствуйте! Великолепное решение! Спасибо за него. Вот подскажите, пожалуйста, у меня много контента и айди вот такой <?=$products['goods_id']?> но как сделать, чтобы окно работало под каждый айди я не смог. Подскажите решение. Буду благодарен!

  31. №11077
    Вячеслав
    Вячеслав 15 сент. 2017 г., 18:07:42

    И ещё забыл спросить.. Как сделать так, чтобы окно можно было закрыть не только крестиком, но и при клике в любое место экране, кроме самого окна разумеется.

  32. №11078
    Вячеслав
    Вячеслав 16 сент. 2017 г., 8:57:04

    Я разобрался! Большое спасибо за отличный скрипт! Вы не зря стараетесь. Успехов вам.

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.