<rmcreative>

RSS

Все заметки с тегами «JavaScript, CSS, modal»

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

    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

    32 комментария