Сразу скажу, что речь пойдет не о надоедливых так называемых 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); } }