div’ное окно

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

div окно основы

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


 

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

Это — 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);
	}
}

Х

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

55 Комментарии “div’ное окно

  1. Блин, мужики, клёвый сайт! Однозначно в закладки!

  2. Да, можно ещё добавить информацию о том как сделать такое окно перетаскиваемым?

  3. на всякого мудреца довольно простоты — простота это классно
    Спасибо

  4. «Нажали?! А как закрывать будем? Вот так вот! У нас в России всегда так — сначала нажмем на кнопку, а потом инструкцию до конца дочитываем. Ну ладно, refresh’тесь и продолжим.»
    Точняк, так и есть ))) Спасибо, не нужно самому карячиться с кодом

  5. Бесспорно полезная статья. Особенно для тех, кто пока не имеет своих заготовок или для тех, кому быстро нужно сделать окно на DIV'ах.

  6. Автор спасибо за хорошее изложение!
    Очень благодарен. В закладки)

  7. Спасибо… Благодаря вам я почистилсвои закладки. ОТ БАРАХЛА.
    Здесь нашел все что нужно!

  8. Ребята, большое спасибо. На сайте собрана очень полезная информация, и главное она изложена в удобной и доступной для понимания форме

  9. НУ НАКОНЕЦТА НАШЁЛ КАК ЭТО ДЕЛАТЬ!!!! Спасибон ребята!

  10. Ну объясните для особенных, куда вставлять последние два кода?

  11. to Рома: посмотреть можно в исходном коде этой страницы

  12. Аааарррр, я чайник!! Скажите,куда последние два вставлять?!

  13. А как на счет блокировки скролинга и div'ное окно по центру

  14. Натыкался на сайт через гугл несколько раз, сегодня добавил в закладки. Респект автору.

  15. могли бы с последним пунктом объяснить по подробнее, а то много времени на эти разборки потратил

  16. Парень, ты просто молодец! Другой бы сам разобрался и молча юзал бы. Редко встретишь такое понятное описание даже для девушек. ПС: "Нажали?! А как закрывать будем? Вот так вот! У нас в России всегда так — сначала нажмем на кнопку, а потом инструкцию до конца дочитываем. Ну ладно, refresh'тесь и продолжим." А на это я тоже попалась:) Дочитала до конца только после этой фразы.

  17. Только рекламу не нашла. Честно хотела кликнуть.

  18. Всем привет))сайт реально рулез!!!! Я долго искал эти слои)и вот, доступно и понятно))СПАСИБО!!! А на вашу ссылку я зашел;

  19. респектоззз!!! вы делаете большое дело! в закладки! только в закладки!

  20. После пяти секунд просмотра — в закладках!!! Молодец! Спасибо огрооооооооомное!!!!

  21. Супер клей меня подери) супер сайт!!!!!!!!!! все самое полезное и главное всё работающее!!! буду советовать друзьям, посетить этот супер ресурс))))))

  22. — А как в ява примерах, запускать функции?? Без квери.

  23. Еще раз спасибо. Сейчас модно отрывать окно, а остальные окна как бы "заувалировать" В открытом окне вводится какая либо информация , потом окно закрывается и основное окно вновь становится "активным" Если понятно о чем я спрашиваю, не могли бы Вы сказать в каком направление искать для реализации оного на своем сайте? P.S Ваша капча уже год работает на моем сайте, лучшего решения чем у Вас не нашел.

  24. Нашел. Все решается с помощью библиотеки jquery http://jqueryjs.googlecode.com/files/jquery-1.3.2.js В сленговом виде это звучит так: "потушить свет при открытие окна". Можно очень разных эффектов создать интересных на основе этой библиотеки. Но все равно спасибо. 🙂

  25. Спасибо! Сайт отличный! Помогите пожалуйста не могу понять как сделать чтобы закрывающий крестик появлялся на слое когда div открыт, а у меня он почему то на форме просто располагается, не так как показано тут в примере! Заранее спасибо!

  26. Все разобрался сам! Еще раз говорю сайт отличный! ;D

  27. Нашел эту замечательную строчку как закрыть div, адаптировал под свои нужды и счаслив. В благодарность прошел по ссылкам от google. И буду так поступать каждое следующее посешения. За нужную информацию — принципиально. Спасибо автору….

  28. Огромное спасибо за статью. Конечно чуток времени потратил на плавное появление ))

  29. В bookmark однозначно! и незабываем кликать по рекламе!

  30. Самый классный сайт я когда либо видел!!! Чувак, у тебя большое будущее!!! Ты просто крут!!! Респект!!

  31. Супер ребята, то что искал, отличная темка на 100

  32. я тут наверно единственный кто не понял как это делается.. вставляю код в html файл и не работает (пробовал по разному) или как правильно его прикрепить ?? подскажите пожалуйста

  33. Интереснинько!!! а как добавить функцию чтобы при прокручивании страницы div'ное окощко оставалось на месте???=)

  34. Для того что бы при прокрутке оставалось на месте надо в position: fixed и всё)

  35. доступно написано, добавь плиз как закрыть див клацнув мимо него.

  36. Ребят, а можно как-то сделать, чтобы можно было размер у окна менять после открытия мышкой. Очень хочется, а как сделать — не знаю:(

  37. Большое спасибо за Ваш труд!!!! Вы спасли меня!

  38. Спасибо! Очень помогло! Но было бы круче если использовался Jquery с еффектом fadeDown()!!!

  39. Афтор коменты фейковые хватит писать. Код гавно кстати. Под ie тести и под линевые браузеры.

  40. А можно это сделать без позиционирования? В моем случае это должен быть блок, который плавно раздвигает два блока по бокам. Заранее спасибо

  41. Даааа… Правильно написал nsd. Комментарии фейковые, да еще с призывами нажимать на рекламу. Скрипты на разворачивание и плавное появление — не работают. Потратил много времени, чтобы разобраться.

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

  43. в нете много уроков разных, но здесь именно то что мне надо) спс

  44. А как сделать это окно по центру экрана, без указания top, left и тд, в пикселях! У всех мониторы разные.

  45. Действительно спасибо. Всё просто и ясно. Только скрипты прикрутить тяжеловато, не совсем понимающим. Оставляю строчку надеюсь кому то поможет. Спасибо. Для плавного. <input onclick="document.getElementById('divwin').style.display='block'; wObj=document.getElementById('divwin'); wObj.style.opacity=0; wObj.style.display='block'; op=0; appear();" type="button" value=" Open ">

  46. Отличный сайт, спасибо автору! В закладки!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *