Сегодня 24 июля, четверг ГлавнаяНовостиО проектеЛичный кабинетПомощьКонтакты Сделать стартовойКарта сайтаНаписать администрации
Поиск по сайту
 
Ваше мнение
Какой рейтинг вас больше интересует?
 
 
 
 
 
Проголосовало: 7281
Кнопка
BlogRider.ru - Каталог блогов Рунета
получить код
RMCreative.ru - Блог
RMCreative.ru - Блог
Голосов: 1
Адрес блога: http://rmcreative.ru/feed/
Добавлен: 2008-06-12 21:34:00 блограйдером ZaiSL
 

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

2012-07-05 14:57:01 (читать в оригинале)

Обычно модальные окна и диалоги делаются при помощи плагинов 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;
}



 


Самый-самый блог
Блогер ЖЖ все стерпит
ЖЖ все стерпит
по сумме баллов (758) в категории «Истории»


Загрузка...Загрузка...
BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.