Pop up DHTML

publicado 2010artigo por Marcus

Este código em dhtml permite que você crie uma janela de pop up ou caixa de apresentação de conteúdo. Ela é compatível com o internet explorer, firefox e opera.

Além disso, ela pode ser arrastada pelo usuário e ainda inclui um botão de fechamento. Pode ser usada tanto para destacar algum conteúdo quanto para informar algo aos seus visitantes. A grande vantagem é que este pop up não pode ser bloqueado facilmente.

Instalando o Pop up.

Copie e cole o javascript abaixo entre as tags <head> </head> do da página onde você quer que este pop up em dhtml apareça. Não é preciso fazer nenhum tipo de modificação nesse primeiro script

Selecionar Código
<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>

Personalizando o código do popup

Insira o código html a seguir no pé da página, antes da tag </body>. Todas as alterações na aparência da janela de pop up em dhtml são feitas no código abaixo. Nele é possível mudar o tamanho da janela de pop up, o local onde ela aparece etc.

<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>Título do seu pop up</small></strong></font></layer></ilayer></td>
<td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="botaodefecharjanela.gif" width="16px"
height="14px" border=0></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">



testando



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

Pop up DHTML

Instalando o Pop up.

Personalizando o código do popup

Categorias

Sites parceiros

Melhores da internet

Informações

Video em destaque

Templates Grátis

Participe do criar site e ganhe prêmios