Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.07.2014, 09:33
Аспирант
Отправить личное сообщение для Urukhay Посмотреть профиль Найти все сообщения от Urukhay
 
Регистрация: 04.07.2014
Сообщений: 51

Фоновое затемнение и менюшка.
На многих сайтах есть такая фишка:
Когда куда-либо кликаешь, затемняется все остальное и в центре вылазит диалог.
Как осуществить такое же, но чтобы вылазил не диалог, и картинка? И как делается это затемнение?
Ответить с цитированием
  #2 (permalink)  
Старый 25.07.2014, 19:28
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Это экран накрывают сверху полупрозрачной панелью черного или белого цвета и максимальным z-индексом, например:
<html>
<body>
<script>
function test1()
{
document.getElementById('zanaves').style.display = 'block';
document.getElementById('pic').style.display = 'block';
};
function test2()
{
document.getElementById('zanaves').style.display = 'none';
document.getElementById('pic').style.display = 'none';
};    
</script>
текст на сайте<br>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"><br>

<div id="zanaves" style="position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; display:none; z-index:1000;">
<div style="position:absolute; left:0; top:0; width:100%; height:100%; background-color:#000; opacity:.7;"></div>
<img id="pic" style="position:relative; left:20%; top:5%; display:none; z-index:1" src="http://gigalit.info/img/avon.jpg">
</div>
  
<input style="position:relative; z-index:1001" type="button" value="затемнить" onclick=test1()>
<input style="position:relative; z-index:1001" type="button" value="растемнить" onclick=test2()>        
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 25.07.2014, 23:57
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,138

как еще один вариант Блок с картинкой поверх формы
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
скроллинг и затемнение экрана Nailya (X)HTML/CSS 13 30.09.2013 17:48
Затемнение в checkbox MCB Элементы интерфейса 2 30.10.2011 11:18
Фоновое изображение формы genek45533 Элементы интерфейса 1 07.10.2011 21:04
Как фоновое изображение дочерних объектов... DDSSDD Элементы интерфейса 4 11.04.2011 18:52
фоновое изображение через fileUpload i8th Events/DOM/Window 4 25.02.2010 11:53