<rmcreative>

RSS

Все заметки с тегом «modal»

Можно уточнить:

    (1)
  1. The Modal

    13 июля 2012

    Оформил «правильные модальные окна» в плагин jQuery и выложил на github.

    API получился, на мой вкус, неплохим. Можно делать, например, вот такие штуки:

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

    На данный момент найдены две нехорошести — одна со скроллом кнопками в FF, вторая — со скроллом на iPad. Со временем, конечно же, они будут исправлены.

    Пользуемся и форкаем

    27 комментариев
  2. Правильные модальные окна

    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 комментария
  3. SimpleModal

    29 октября 2009

    Гибкая кроссбраузерная реализация модального бокса с простым и понятным интерфейсом.

    Демо

    Пользуемся

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