jQuery pop-up

[Vladkata]

Здравейте! Направих си едно pop-up-че, но ми трябва да му сложа малко jQuery. Трябва да го направя да може да се мести и затваря, а когато се появява, всичко зад него да се затъмнява. До сега имам този код:

[js]
$(document).ready(function() {
setTimeout(function(){$("#dialog").fadeIn(3000);}, 5000);
});
[/js]

т.е. се появява след 5 секунди, с ефект fadeIn. Само ако може не ми давайте линк към jquery.com/... или някой урок, защото вече прегледах draggable();, но ми писна да гледам 1000 функции, защото ми трябва само 1. Знам, че е много по-добре да се научи, но ми трябва сега...

Благодаря предварително!

 

[Vladkata]

Някой?

 

[exec]

В jQuery User Interface има готов widget, защо не го ползваш? Може и своя CSS тема да си създадеш?

http://jqueryui.com/demos/dialog/#modal

 

[Vladkata]

В jQuery User Interface има готов widget, защо не го ползваш? Може и своя CSS тема да си създадеш?

http://jqueryui.com/demos/dialog/#modal

Написал съм защо... Просто искам да познавам кода, да е семпло нещо, а не да гледам JavaScript код за поп-ъп, като цялата библиотека голям...

 

[F1r3Fl3x]

Това с полупрозрачния прозорец се прави с две дивчета.
Един за кутийката, която се намира в центъра и един за полупрозрачния фон.
[css]
/* полупрозрачния фон */
.popup-holder {
/* елемента не се движи при скролиране*/
position: fixed;
/* за да се показва над другите елементи */
z-index: 1000;
/* заема големината на браузъра */
width: 100%; height:100%;
/* позициониран в горния ляв ъгъл */
top: 0; left:0;
/* първоначално скрит */
display: none;
/* тези са просто за пример*/
background-color: blue;
opacity: 0.3;
}

/* кутийката */
.popup-box {
position: fixed;
/* с едно повече от .popup-holder! */
z-index: 1001;
/* примерни размери */
width: 300px; height: 150px;
/* горния ляв ръб на кутийката е точно в центъра на екрана */
top: 50%; left: 50%;
/* Взимаме отрицателните стойности на половинките на размерите на кутийката, за да я центрираме точно в средата */
margin-top: -75px;
margin-left: -150px;
display: none;
}
[/css]

<div class="popup-holder"></div>
<div class="popup-box"></div>

Ето малък скрипт, за drag на елементи
http://www.webtoolkit.info/javascript-drag-and-drop.html

Сега просто и двата елемента трябва да ги покажеш с jQuery
Ако нещо не ти е ясно, питай