div'ное окно

div окно основы

Это - 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 окно

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

• Tweet

Комментарии:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

прикольно Вас копипастят - http://persheron.net/index.php?option=com_content&task=view&id=37&Itemid=30 и http://zmicode.ru/articals/javascript/div_window/

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

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

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

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

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

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

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

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

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

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

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

Нашел. Все решается с помощью библиотеки jquery

http://jqueryjs.googlecode.com/files/jquery-1.3.2.js

В сленговом виде это звучит так: "потушить свет при открытие окна". Можно очень разных эффектов создать интересных на основе этой библиотеки.
Но все равно спасибо. :-)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

от кого: