Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.12.2012, 01:15
Интересующийся
Отправить личное сообщение для ololosh Посмотреть профиль Найти все сообщения от ololosh
 
Регистрация: 25.07.2012
Сообщений: 27

Затемнение и блокировка всего, при показе модального окна
Наверняка вы часто встречали такое.
Вы кликаете по кнопке, выскакивает модальное окошко, по центру экрана...и ВСЁ пространство вокруг этого окошка становиться как бы затемнённым (как будто бы поверх наложили див размерами с блок html с белым, частично-прозрачным фоном) и клик по чему угодно за пределами моего модального окна (по любой ссылке итд) блокируется, не срабатывает короче.

Подскажите хотя бы идею. Как делать затемнение и блокировать всю область за пределами модального окна.
Реализовывать буду на jQuery, ессесно.
Ответить с цитированием
  #2 (permalink)  
Старый 19.12.2012, 01:44
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от ololosh
Подскажите хотя бы идею. Как делать затемнение и блокировать всю область за пределами модального окна.
Реализовывать буду на jQuery, ессесно.
Ставят div блок с color:#000000; position:fixed; height:100%; width:100%; z-index:10000; cкриптом устанавливают opacity порядка 0.4-0.7
z-index:у модального окна чуть более данной подложки

Последний раз редактировалось Deff, 19.12.2012 в 02:00.
Ответить с цитированием
  #3 (permalink)  
Старый 19.12.2012, 02:13
Интересующийся
Отправить личное сообщение для ololosh Посмотреть профиль Найти все сообщения от ololosh
 
Регистрация: 25.07.2012
Сообщений: 27

А почему может быть такое, что подложка
#podlogka {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #000;
			opacity: 0.6;
			z-index: 100;
		}


#modalWindow {
			margin: 100px auto 0;
			width: 400px;
			overflow: hidden;
			z-index: 10001;
			border: 1px solid #4c6a8a;
		}


имея более низкий з-индекс, чем моё модальное окно, блокирует это самое окно?
Ответить с цитированием
  #4 (permalink)  
Старый 19.12.2012, 02:43
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

ololosh,
У модального окна должна быть позиция absolute,relative, или fixed

Только при данных вариантах position работает z-index

У затенения обычно position:fixed - иначе оно сдвигается при скроле страницы
Ответить с цитированием
  #5 (permalink)  
Старый 03.09.2013, 14:39
Новичок на форуме
Отправить личное сообщение для FlyerDell Посмотреть профиль Найти все сообщения от FlyerDell
 
Регистрация: 03.09.2013
Сообщений: 3

Спасибо огромное за тему!
Спасибо огромное за тему! Ваша дискуссия оказалось очень кстати. Как раз искал описание подобного приёма!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное затемнение всего кроме одного div'a DiGiT Элементы интерфейса 6 30.01.2010 14:23
Скролл окна при добавлении контента "сверху"" yaneblog Events/DOM/Window 0 22.01.2010 23:00
Вывод данных единожды, при открытии окна? Ggorsh Events/DOM/Window 1 28.04.2009 01:04
Завершение процесса воспроизведения видео при закрытии окна IE skif Общие вопросы Javascript 0 11.03.2009 08:11
как при открытии окна закрыть предыдущее Евдокимова Events/DOM/Window 3 16.09.2008 17:12