DIV`ные окна

Сразу скажу, что речь пойдет не о надоедливых так называемых popup window, расшатывающих нашу нервную систему бестолковой рекламой. Вообще я сторонник того, чтобы на web странице происходили только события инициированные самим пользователем, т.е. никаких popup'ов, reload'ов, перенаправлений и т.д. Речь пойдет о тех случаях, когда использование дополнительных окон понастоящему оправдано, красиво и не вредит юзабилити. Например, окно входа в личный кабинет, окно настроек web приложения, окно оповещения и т.п. Во всех подобных случаях открытие еще одного окна браузера не элегантно, а вот слой div смотрится гораздо приятнее. А если его еще и открыть эффектно ... И здесь нам помогут JavaScript, CSS и HTML (куда ж без него).

div окно основы

Самое простое окно:


<style>
	#divwin 
	{
	position: absolute;
	width: 300px;
	height: 200px;
	border: 1px solid gray;
	background: white;
	display: none;
	padding: 20px 20px 20px 20px;
	text-align: center;
	}
</style>
<div id="divwin"><br><br><h2>Это - div`ное окно!</h2></div>
<input type="button" value=" Open " onclick="document.getElementById('divwin').style.display='block'">

Нажали?! А как закрывать будем? Вот так вот! У нас в России всегда так - сначала нажмем на кнопку, а потом инструкцию до конца дочитываем. Ну ладно, refresh'тесь и продолжим.

Как уже стало ясно, неплохо было бы добавить возможность закрыть окошко:


<style>
#closeButton {
position: absolute;
top: 0px;
right: 0px;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
font-weight: bold;
cursor: pointer;
padding: 2px 4px 2px 4px;
}
</style>
<div id="divwin">
	<div id="closeButton" onclick="document.getElementById('divwin').style.display='none'">Х</div>
	<br><br><h2>Это - div'ное окно!</h2>
</div>

Ну вот, это уже неплохо. Переходим к эффектному появлению.

разворачивающееся div окно

Объяснять не буду - кто захочет разберется.


var sStep = 16;
var sTimeout = 15;
var sLeft = 160;
var sRight = 160;
var wObj;
 
function winOpen() {
	wObj.style.display = 'block';
	 
	if (sLeft > 0) {
		sRight += sStep;
		sLeft -= sStep;        
		var rect = 'rect(auto, '+ sRight +'px, auto, '+ sLeft +'px)';      
		wObj.style.clip = rect;    
		setTimeout(winOpen, sTimeout);
	}
}
 
function winClose() {
	if (sLeft < sRight) {
		sRight -= sStep;
		sLeft += sStep;
		var rect = 'rect(auto, '+ sRight +'px, auto, '+ sLeft +'px)';
		wObj.style.clip = rect;
		setTimeout(winClose, sTimeout);
	}
	else wObj.style.display = 'none';
}

плавно появляющееся div окно


function appear() {
	if(op < 1) {
		op += 0.1;
		wObj.style.opacity = op;
		wObj.style.filter='alpha(opacity='+op*100+')';
		t = setTimeout('appear()', 30);
	}
} 

Поделитесь статьей со своими друзьями