- PVSM.RU - https://www.pvsm.ru -

The Modal — правильные модальные окна

Очень часто модальные окна и диалоги делаются при помощи плагинов jQuery. Например, SimpleModal [1] или jqModal [2]. К сожалению, все они, в варианте по умолчанию, работают неправильно.

Что же такое «правильно»?

Если окно модальное, то оно обязано быть модальным:

  1. Пользователю нельзя позволять прокручивать страницу под ним.
  2. При этом, если содержимого в модальном окне очень много, нужно позволить прокручивать содержимое.

По этому принципу работает просмотр фото в Facebook и Вконтакте и, я считаю, что для модальных окон это правильный вариант.

Чтобы не мучать вас заранее деталями реализации, покажу сначала демо плагина jQuery [3]: http://rmcreative.ru/playground/modals_plugin/demo.html [4].

Ну а теперь немного про реализацию.

Идея достаточно проста. В открытом состоянии разметка получается примерно вот такая:

<html>
  <head>
    ...    
  </head>
  <body class="lock">
    <div class="shim">
      <div class="modal">
        ...
        <h1>Hi, I'm the modal demo.</h1>
        ...
      </div>
    </div>
    ...
  </body>
</html>

К ней применяется CSS:

/* Данный класс навешивается на контейнер при открытии модального окна. Для нормальных браузеров это body, для стырах IE — html */
.lock {
    /* убираем скроллбары с основнового содержимого страницы */
    overflow: hidden;
}

/* ширма (полупрозрачное затенение под модальным окном) */
.shim {
    /* фиксируем, растягиваем на весь доступный экран */
    position: fixed;
    bottom: 0; left: 0; top: 0; right: 0;

    /* если в модальном окне много содержимого, показываем скроллбар */
    overflow: auto;

    /* однопальцевый скролл для iPad*/
    -webkit-overflow-scrolling: touch;
}

/* фикс для странностей в iPad */
.shim > * {
    -webkit-transform: translateZ(0px);
}

/* декоративная часть ширмы: делаем полупрозрачной и чёрной */
.shim {
    background: rgba(0,0,0,0.5);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6–IE8 */
    zoom: 1;
}

Вот и всё. Остаётся завернуть в удобный для использования плагин jQuery и добавить плющем вроде закрытия по ESC. У меня получился плагин вот с таким API:

$.modal().open({
    onOpen: function(el, options){
        $.get('http://example.com/', function(data){
            el.html(data);
        });
    }
});

Забрать его можно на github [3].

На данный момент имеется некоторое количество нехорошестей, которые, надеюсь, поможет исправить сообщество:

  • Скролл клавиатурой в FF скроллит страницу вместо модального окна.
  • На iPad скролл работает не очень стабильно (иногда скроллит страницу).
  • Скролл нажатием средней кнопки мыши работает неверно.
  • Открытие модального окна сдвигает страницу в том случае, если появляется или убирается скролл.

Конструктивная критика и советы очень приветствуются.

Автор: SamDark

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/12098

Ссылки в тексте:

[1] SimpleModal: http://www.ericmmartin.com/projects/simplemodal/

[2] jqModal: http://dev.iceburg.net/jquery/jqModal/

[3] плагина jQuery: https://github.com/samdark/the-modal

[4] http://rmcreative.ru/playground/modals_plugin/demo.html: http://rmcreative.ru/playground/modals_plugin/demo.html