Эффект затемнения всей страницы

[SkyLine32]

Есть кнопка, нажимаем на неё и появляется окошко созданное с помощью div тега...

Как реализовать следующее...?

При нажатии на кнопку нужно создать эффект затемнения всей страницы кроме того окошка которое мы открыли.

Благодарю за помощь тем кто поможет

[Victor Ananiev]

может покопать в сторону z-index и position:absolute; с полупрозрачным фоном?

[SelenIT]

Классическое решение (во всяких лайтбоксах и т.п.), насколько я знаю, именно такое: полупрозрачный темный слой (div) размером со всю страницу/видимую область, слой с "окошком" поверх него.

[Victor Ananiev]

хм, ну так как я и сказал)

[rus]

Не забыли про "при нажатии на кнопку"?

Это уже событие, а событие - это уже ява скрипт, так что без него по моему не обойтись.

[SelenIT]

Victor Ananiev, все верно, я просто немного обобщил (там возможны варианты с position:fixed вместо absolute, разными способами задания полупрозрачности... ну и вообще кто во что горазд.

rus, конечно, включать/выключать эффект придется через JS, но хочется свести скрипт к минимуму, от силы к подгонке размеров, а в идеале и без нее обойтись (только класс добавить/убрать). Ради спортивного интереса попробовал было сделать совсем без JS, но мало-мальски похоже на желаемое получилось лишь в FF...

[SkyLine32]

Ок народ, приведу пример того что я хочу...

<div id="allbut">
<a href="#" onclick="document.getElementById('allmenu').style.display='block'; return false;" title="Купить товары">Купить</a>
</div>
</center>

Это будет сама кнопочка...

<div id="allmenu">
<div id="border">
<!— Кнопка "закрыть панель"!—>
<div style="text-align: right;">
<button id="cl" type="button" value="Закрыть" title="Закрыть панель" onClick="document.getElementById('allmenu').style.display='none'; return false;" /></button>
</div>
<!—/ Кнопка "закрыть панель"!—>
<div id="catigor" onclick="document.getElementById('catigor').style.display='block'; return false;">
<p align="center">Что вы хотите купить?</p>
<div style="padding:6px"></div>
<div id="allmenua">
<ul>
<li id="a"><a href="/">Компьютеры, комплектующие</a></li>
<li id="a"><a href="/">Мониторы</a></li>
<li id="a"><a href="/">Процессоры и материнские платы</a></li>
<li id="a"><a href="/">Носители информации</a></li>
<li id="a"><a href="/">Видекарты</a></li>
<li id="a"><a href="/">Модемы и сетевое оборудование</a></li>
<li id="a"><a href="/">Ноутбуки</a></li>
<li id="a"><a href="/">Принтеры и сканеры</a></li>
<li id="a"><a href="/">Интернет, программы</a></li>
</ul>
</div>
<div id="allmenub">
<ul>
<li id="a"><a href="/">Бытовая техника</a></li>
<li id="a"><a href="/">Телевизоры</a></li>
<li id="a"><a href="/">Холодильники</a></li>
<li id="a"><a href="/">Стиральные машины</a></li>
<li id="a"><a href="/">Кухонные приборы</a></li>
<li id="a"><a href="/">Швейные машины</a></li>
<li id="a"><a href="/">DVD плееры и видеомагнитофоны</a></li>
<li id="a"><a href="/">Видеокамеры</a></li>
<li id="a"><a href="/">Фотоаппараты и оптические приборы</a></li>
<li id="a"><a href="/">Игровые приставки и картриджи</a></li>
<li id="a"><a href="/">Музыкальные инструменты</a></li>
<li id="a"><a href="/">Мобильные телефоны</a></li>
<li id="a"><a href="/">Прочее</a></li>
</ul>
</div>
<div id="allmenuc">
<ul>
<li id="a"><a href="/">Авто, Мото, Запчасти</a></li>
<li id="a"><a href="/">Легковые автомобили</a></li>
<li id="a"><a href="/">Грузовики</a></li>
<li id="a"><a href="/">Автобусы</a></li>
<li id="a"><a href="/">Прицепы и фургоны</a></li>
<li id="a"><a href="/">Мотоциклы, мопеды</a></li>
<li id="a"><a href="/">Велосипеды</a></li>
<li id="a"><a href="/">Спецавтотехника</a></li>
<li id="a"><a href="/">Ремонт и сервис</a></li>
<li id="a"><a href="/">Запчасти, Аксессуары</a></li>
</ul>
</div>
</div>
</div>
</div>

это будет выподающее окошко...

в css:

#allmenu {
   	position: absolute;
	width:984px;
	left: 15%;
  	top: 140px;
	border:solid #ace0ff 5px;
	display: none;
  	z-index: 30;
    overflow: hidden;
    background:#003652 url('../img/lp.png') repeat-x;
    color:#fff;
    text-align:left;
	opacity: 0.95;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95) progid:DXImageTransform.Microsoft.Shadow(color=#cacaca, direction=135, strength=3)";
	filter: alpha(opacity=95, enabled=1) progid:DXImageTransform.Microsoft.Shadow(color=#cacaca, direction=135, strength=3);
}

#allbut a {
   background:#e2e9ee url(../img/allm.png) no-repeat;
   font:13px Verdana;
   font-weight:bold;
   padding:13px 0;
   width:213px;
   text-decoration:none;
   color:#4e4e4e;
  display:block;
}
#allbut a:hover {background:url('../img/allm.png') 0 -43px;}

#lg #border {
   border:1px solid #004671;
   padding-left:70px;
   padding-bottom:15px
}

#catigor {
display: none;
}

Теперь будет всё понятно... А вот я нашёл пример но с картинкой...гляньте http://www.huddletogether.com/projects/lightbox2/

это то что мне нужно но.... там эфект с картинкой... вобщем кто сможет прикрутить такую фишку к моему коду без использования картинки...поощрю на вебмани icq: 403988326

Edited February 6, 2009 by SkyLine32