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);
	}
}

 

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

  1. Johnny

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

  2. zerohold

    Супер. Понравилось сразу

  3. danko-13

    Молодец! Хороший сайт! Тоже в закладки!

  4. Гость

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

  5. beast

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

  6. Яков

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

  7. virua

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

  8. Карэн

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

  9. TyTa

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

  10. AltEgo

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

  11. frost_asm

    Красиво и просто. Спасибо)

  12. Илья

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

  13. Рома

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

  14. Alek Veritov

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

  15. 4KN

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

  16. anonymous

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

  17. guest

    Уж простите, но одно слово: АХ**НО!!!

  18. Strike

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

  19. Mike

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

  20. Надежда

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

  21. Надежда

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

  22. Kesha

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

  23. sunchez

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

  24. Ден

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

  25. Гомер)

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

  26. Новичек

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

  27. Сергея

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

  28. Сергея

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

  29. Кирилл

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

  30. Кирилл

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

  31. Евгений

    Просто и понятно) Спасибо за инфу…

  32. ck

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

  33. www.zdami.ru

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

  34. George

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

  35. Яков

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

  36. Артур

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

  37. Роман

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

  38. Андрей

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

  39. Vlad

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

  40. Саша

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

  41. Wedun

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

  42. anonymous

    спасибо, чувак!

  43. Търло

    спасиба! :смаил с языком:

  44. Ниссо

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

  45. Владимир XXX

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

  46. Amir.

    Красава,отдуши за помощь)))

  47. nsd

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

  48. аев

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

  49. :(

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

  50. anonim

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

  51. Начинающий

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

  52. BigDen

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

  53. От меня

    Действительно спасибо. Всё просто и ясно. Только скрипты прикрутить тяжеловато, не совсем понимающим. Оставляю строчку надеюсь кому то поможет. Спасибо. Для плавного. <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 ">

  54. Алексей

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

  55. владимир

    Хорошая работа.В закладки!