Всплывающее окно

[Sikor]

Есть вот такая часть страницы:

<script type="text/javascript">
	function ShowPopup(id) {
		document.getElementById('popupIframe').src = '...someurl...';
		document.getElementById('popupIframeContainer').style.display = 'block';
	}

	function HidePopup() {
		document.getElementById('popupIframe').src = null;
		document.getElementById('popupIframeContainer').style.display = 'none';
	}
</script>

<div id="popupIframeContainer" style="position: fixed; display: none; border: thin solid black; left: 20px; top: 20px; background-color: White">
	<input type="button" value="X" onclick="HidePopup()"/>
	<iframe id="popupIframe">
	</iframe>
</div>

При некотором действии на странице вызывается ShowPopup, который должен выводить "всплывающее окошко". Как сделать:

1. Сделать неактивным (заблокированным) весь контент страницы под всплывающим окном?
   
2. Как затемнить страницу под всплывающем окном?
   
3. Как установить всплывающее окно по центру браузера?
   

[CalvinKlein]

При некотором действии на странице вызывается ShowPopup, который должен выводить "всплывающее окошко". Как сделать:

1. Сделать неактивным (заблокированным) весь контент страницы под всплывающим окном?
   
2. Как затемнить страницу под всплывающем окном?
   
3. Как установить всплывающее окно по центру браузера?
   

1, 2. разместить поверх страницы чёрный полупрозрачный слой

.sloy
{
  position:fixed;
  width:100%;
  height:100%;
  left:0;
  top:0;
  background:#000; /* ( или путь к файлу с полупрозрачным фоном ) */
  opacity:0.5;
  z-index:999;
}

И ещё при открытии окна применить к body overflow:hidden

3. Если окно фикс. ширины и высоты

.okno
{
  position:fixed;
  width:400px;
  height:400px;
  left:50%;
  top:50%;
  margin-top:-200px;
  margin-left:-200px;
  z-index:1000;
}

Edited August 19, 2011 by CalvinKlein

[Sikor]

Большое спасибо, всё заработало.