Помогни ни да направим Uroci.net по - богат! Добави урок

JavaScript PopUp

advokata   трудност:    видян: 12921

В този урок ще ви покажа как да си направим едно PopUp прозорче.
Има подобие на Windows прозорците (Класически стил).
Преди всичко в кодът който трябва да сложим в <body> тага , ще има код за изображение.
Свалете това X-че под-долу (Save Target As) . Картинката ще се покаже във горният-десен ъгъл ако кодът открие изображението.
уроци - close.gif


Сега да започнем с кодирането.

1. Сега добавяме следният код в <head> тага някъде:

<script type="text/javascript">
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

//drag drop function for NS 4////
/////////////////////////////////

var dragswitch=0
var nsx
var nsy
var nstemp

function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

//drag drop function for ie4+ and NS6////
/////////////////////////////////


function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
return false
}
}

function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? "documentElement" : "body"
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmouseup=new Function("dragapproved=false")

////drag drop functions end here//////

function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}

</script>

ВНИМАНИЕ*
АКО НЕ РАЗБИРАТЕ ОТ JAVASCRIPT ПО-ДОБРЕ НЕ ПРОМЕНЯЙТЕ НИЩО! НЕ ЧЕ ЩЕ СЕ ПОЛУЧИ НЯКАКВА БРУТАЛНА ГРЕШКА, НО ПРОЗОРЧЕТО НЯМА ДА ГО ВИЖДАТЕ В СТРАНИЦАТА, В КОЯТО СТЕ ГО ДОБАВИЛИ!

2. Сега добавяме следният код точно над </body> тага:
<div id="showimage" style="position:absolute;width:250px;left:250px;top:250px">

<table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="2">
<tr>
<td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
height="36px">
<tr>
<td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onMousedown="initializedrag(event)"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"><font face="Verdana"
color="#FFFFFF"><strong><small>Кутия за съобщения</small></strong></font></layer></ilayer></td>
<td style="cursor:hand"><a xhref="http://uroci.net/#" onClick="hidebox();return false"><img xsrc="close.gif" width="16px"
height="14px" border=0></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">

<!-- Сложете вашето съдържание на страницата -->

Вашето съдържаниет в прозорчето

<!-- Свършване -->

</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

Вече свършихме.
Между другото, за да промениме съдържанието на PopUp-а намерете коментарите преди затварянето на последният </td> таг. За да преместим позицията на PopUp-а намерете в първият <div> таг "left" "top" .

ПРЕВОДА СИ Е ЛИЧНО МОЙ!
Истинският автор на урока е : Jim Silver
Източника на урока е:Dynamic Drive .

Всички мнения приемам , все пак урока ми е първи.

Enjoy!



Коментари (3)

mitev1234 на 05.05 2007 в 19:56ч.
Здравейте, аз съм апсолютно начинаещ и като такъв започвам с един може би изключително елементтарен въпрос, а именно : Каква е средата за Java? В смисъл къде се изписват тези алгоритми, които са показани по-горе? Трябва ли да се инсталира някъква програма, каква ...
Благодаря предварително!
advokata на 03.06 2007 в 08:24ч.
Mitev1234 , не ти е нужно да инсталираш нищо , просто JS кода го копираш в таговете от документа ти.
reasse на 10.04 2011 в 17:50ч.
Или копираш js кода от урока по горе и го поставяш в notepad и го запазваш като
popup.js или както желаеш след което за да го изискаш в някой документ използваш

в тага тук това е в случай че js фаела се намира в една и съша папка в която е файла в който ще го изискаш но ако е в специфична папка да речем js то той се изисква със
и не на последно място ако неизкаш да създаваш оттделен документ и да запазваш като js то ти може да направиш следното


тук поставяш javascripta който желаеш

този таг може да го поставиш във самият таг тук

By BG-DW-PRO

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com