Адаптивные модальные окна, лучшее решение. Какое оно?

Question

[Stepan S.]

Ищу скрипт для адаптивных модальных окон.

Пока что не нашел скрипта, у которого был бы минимальный объём JS и CSS, нужно это для того что бы были широкие возможности для стилизации каждого отдельного окна.

Хороший пример разметки:

<button data-toggle="modal" data-target="#modal">Launch demo modal</button>

<div class="modal" id="modal" tabindex="-1" role="dialog">
…
<button type="button" class="close" data-dismiss="modal">Close</button>
…

Answer 1

[Максим Софронов]

Вдруг кому пригодится, написал свой плагин модальных окон Картонбокс: cartonbox.constlab.ru

Основное отличие от существующих подобных плагинов (даже тех, что описаны выше) — правильная работа скролла на любых устройствах, включая мобильные. При открытом модальном окне основное содержимое страницы, если оно имело полосу прокрутки, не прокручивается и никак не реагирует на скролл колесом мыши или на нажатие кнопок прокрутки на клавиатуре.

Answer 2

[Андрей Ежгуров]

arcticlab.ru/arcticmodal - маленькая css и правильная обработка прокрутки. Вариант, предложенный @pchelovek, прокрутку вообще игнорирует.

Comments

[Stepan S.]

А в вашем варианте скролл внутри окна делать можно (без скролла снаружи)?

[Андрей Ежгуров]

Да, можно. На сайте плагина есть демо-пример.

[Stepan S.]

Увидел только «Окно с большой высотой», но там прокрутка снаружи

[Андрей Ежгуров]

Если Вы хотите сделать полосу прокрутки внутри модального окна, то это элементарно делается с помощью css:

height: 200px;
overflow: auto;

Для стилизации полос прокрутки существует огромное кол-во плагинов - на любой вкус. Наберите в google "jquery полоса прокрутки".

[Stepan S.]

@eandr_67 Удобней, когда это скриптом настраивается. Если я поставлю 500, то это может уже на телефоне не поместиться

[Андрей Ежгуров]

Задать (обязательно) для html и body css-параметр "height: 100%;", а для модального окна, например, "max-height: 90%;" - автоматически будет подстраиваться под размер на маленьких экранах.

Answer 3

[Александр]

zurb.com/playground/reveal-modal-plugin

Answer 4

[A K]

dimsemenov.com/plugins/magnific-popup - адаптивное окно + правильная обработка прокрутки, можно вставить любой контент

Comments

[Stepan S.]

А в вашем варианте скролл внутри окна делать можно (без скролла снаружи)?

[A K]

В случаях когда вам требуется <20% нужд плагина, лучше написать с нуля специально под ваш случай

Answer 5

[Alexander Mischuk]

Хочешь сделать хорошо - сделай сам (с)
А что мешает взять ваш пример хорошей разметки и делать fadeIn по data-toggle="modal", например, и fadeOut по .close?
Как уже сказал @eandr_67, то max-height используйте, если нужна прокрутка внутри модального блока.
Так же рекомендую Absolute Horizontal And Vertical Centering In CSS.