Показать сообщение отдельно
  #1 (permalink)  
Старый 19.08.2011, 13:48
Новичок на форуме
Отправить личное сообщение для specx Посмотреть профиль Найти все сообщения от specx
 
Регистрация: 19.08.2011
Сообщений: 1

Всплывающие окно
Доброе время суток, пытаюсь сделать несколько всплывающих окон при наажатии на кнопку, думаю как можно упростить скрипт, сам плохо понимаю пример взял, но скрипт получается большой
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Модальное окно</title>
<style type="text/css">
body {margin:0; padding:0}
h1, h2 {text-align:center; color:#f00}
p {margin:0; text-align:justify; text-indent:1.5em}
#content {padding:5px}

/* черная полупрозрачная подложка */
#modall {
	display:none;
	position:absolute;
	width:100%;
	text-align:center;
}
/* для нормальных браузеров */
/* IE 6 не понимает спецификатора дочернего селектора > */
body > #modall {
background-color:#000;
-moz-opacity: 0.2; /* код для движков Mozilla */
opacity:.20; 
}

/* псевдоокно */
#formm {
	display:none;
	position:absolute;
	width:400px;
	height:200px;
	margin:auto;
	padding:20px;
	text-align:left;
	background-color:#fff;
}

/* прикрасы */
.login {margin-left:39px}
.pass {margin-left:32px}
.style1 {
	font-family: "Courier New", Courier, monospace;
	white-space: nowrap;
	background-color: #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#modall {filter: Alpha(Opacity=20); background-color:#000;}
</style>
<![endif]-->
<script type="text/javascript">
var timer = null;
var opacity = 20;
function show_modall ()
{
	// нагромождение с низким поклоном Великому Биллу
	// для нормальных браузеров достаточно window.innerHeight
	var height = (window.innerHeight? window.innerHeight: 
		(document.documentElement.clientHeight? document.documentElement.clientHeight: 
		document.body.offsetHeight));
	var width = (window.innerWidth? window.innerWidth: 
		(document.documentElement.clientWidth? document.documentElement.clientWidth: 
		document.body.offsetWidth));
		
	var top = Math.ceil(height / 2 - 110);	// 110 - половина высоты окна с формой, включая padding
	var left = Math.ceil(width / 2 - 210);	// 210 - половина ширины окна с формой, включая padding
	// устанавливаем черный полупрозрачный блок на весь экран
	document.getElementById ("modall").style.height = height+"px";
	// делаем его видимым
	document.getElementById ("modall").style.display = 'block';
	// позиционируем псевдоокно по высоте
	document.getElementById ("formm").style.top = top+"px";
	document.getElementById ("formm").style.left = left+"px";
	// делаем его видимым
	document.getElementById ("formm").style.display = 'block';
	// "проявляем" затенение
	timer = setInterval ("shadow()", 1);
}

function shadow ()
{
	document.getElementById ("modall").style.opacity = opacity++	/ 100;
	document.getElementById ("modall").style.MozOpacity = opacity	/ 100;
	document.getElementById ("modall").style.filter = "Alpha(Opacity="+opacity+")";
	if (opacity >= 80)
		clearInterval (timer);
}
</script>
</head>

<body>
<div id="modall"></div>
	<div id="formm">
		<formm>
		Введите логин <input class="login" type="text" /><br />
		Введите пароль <input class="pass" type="password" /><br />
		Подтвердите пароль <input type="password" /><br />
		<h2><input type="submit" /></h2>
	</formm>
</div>
</div>
<div id="content">
<input type="button" onclick="show_modall()" value="Показать окно" /></p>
</div>
</body>
</html>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Модальное окно</title>
<style type="text/css">
body {margin:0; padding:0}
h1, h2 {text-align:center; color:#f00}
p {margin:0; text-align:justify; text-indent:1.5em}
#content {padding:5px}

/* черная полупрозрачная подложка */
#modal {
	display:none;
	position:absolute;
	width:100%;
	text-align:center;
}
/* для нормальных браузеров */
/* IE 6 не понимает спецификатора дочернего селектора > */
body > #modal {
background-color:#000;
-moz-opacity: 0.2; /* код для движков Mozilla */
opacity:.20; 
}

/* псевдоокно */
#form {
	display:none;
	position:absolute;
	width:400px;
	height:200px;
	margin:auto;
	padding:20px;
	text-align:left;
	background-color:#fff;
}

/* прикрасы */
.login {margin-left:39px}
.pass {margin-left:32px}
.style1 {
	font-family: "Courier New", Courier, monospace;
	white-space: nowrap;
	background-color: #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#modal {filter: Alpha(Opacity=20); background-color:#000;}
</style>
<![endif]-->
<script type="text/javascript">
var timer = null;
var opacity = 20;
function show_modal ()
{
	// нагромождение с низким поклоном Великому Биллу
	// для нормальных браузеров достаточно window.innerHeight
	var height = (window.innerHeight? window.innerHeight: 
		(document.documentElement.clientHeight? document.documentElement.clientHeight: 
		document.body.offsetHeight));
	var width = (window.innerWidth? window.innerWidth: 
		(document.documentElement.clientWidth? document.documentElement.clientWidth: 
		document.body.offsetWidth));
		
	var top = Math.ceil(height / 2 - 110);	// 110 - половина высоты окна с формой, включая padding
	var left = Math.ceil(width / 2 - 210);	// 210 - половина ширины окна с формой, включая padding
	// устанавливаем черный полупрозрачный блок на весь экран
	document.getElementById ("modal").style.height = height+"px";
	// делаем его видимым
	document.getElementById ("modal").style.display = 'block';
	// позиционируем псевдоокно по высоте
	document.getElementById ("form").style.top = top+"px";
	document.getElementById ("form").style.left = left+"px";
	// делаем его видимым
	document.getElementById ("form").style.display = 'block';
	// "проявляем" затенение
	timer = setInterval ("shadow()", 1);
}

function shadow ()
{
	document.getElementById ("modal").style.opacity = opacity++	/ 100;
	document.getElementById ("modal").style.MozOpacity = opacity	/ 100;
	document.getElementById ("modal").style.filter = "Alpha(Opacity="+opacity+")";
	if (opacity >= 80)
		clearInterval (timer);
}
</script>
</head>

<body>
<div id="modal"></div>
	<div id="form">
		<form>
		123
			</form>
</div>
</div>
<div id="content">
<input type="button" onclick="show_modal()" value="Показать окно" /></p>
</div>
</body>
</html>


Спасибо!
Ответить с цитированием