div’ное окно

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

div окно основы

У нас в России всегда так — сначала нажмем на кнопку, а потом инструкцию до конца дочитываем. Ну ладно, refresh’тесь и продолжим. Как уже стало ясно, неплохо было бы добавить возможность закрыть окошко:

Х

Это — div’ное окно!

Х

Это — 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’ное окно!

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

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

Оцените статью
Добавить комментарий