![]() ![]() ![]()
Какой рейтинг вас больше интересует?
|
![]()
Правильные модальные окна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; }
|
![]() ![]() ![]()
Категория «Дизайн»
Взлеты Топ 5
Падения Топ 5
![]()
Популярные за сутки
|
Загрузка...

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