Michele Basso
a- a+

Nuovissimo tipo di finestra PopUp

Questo script, uscito da pochissimi giorni, crea una finestrapopup dal grande impatto grafico. Lo script ècompatibile con tutte le versioni di Internet Explorer e diNetscape, e questo è molto importante, inquanto moltitipi di PopUp non vengono supportati da tutti i browser.

Per vedere un esempio dello script, clicca qui.

Il primo passo, è mettere questo codiceall'interno del tag head:

<script>//DHTML Window script- Copyright Dynamic Drive (http://www.dynamicdrive.com)//For full source code, documentation, and terms of usage,//Visit http://www.dynamicdrive.com/dynamicindex9/dhtmlwindow.htmvar dragapproved=falsevar minrestore=0var initialwidth,initialheightvar ie5=document.all&&document.getElementByIdvar ns6=document.getElementById&&!document.allfunction iecompattest(){return (document.compatMode!="BackCompat")? document.documentElement : document.body}function drag_drop(e){if (ie5&&dragapproved&&event.button==1){document.getElementById("dwindow").style.left=tempx+event.clientX-offsetx+ "px"document.getElementById("dwindow").style.top=tempy+event.clientY-offsety+ "px"}else if (ns6&&dragapproved){document.getElementById("dwindow").style.left=tempx+e.clientX-offsetx+ "px"document.getElementById("dwindow").style.top=tempy+e.clientY-offsety+ "px"}}function initializedrag(e){offsetx=ie5? event.clientX : e.clientXoffsety=ie5? event.clientY : e.clientYdocument.getElementById("dwindowcontent").style.display="none" //extratempx=parseInt(document.getElementById("dwindow").style.left)tempy=parseInt(document.getElementById("dwindow").style.top)dragapproved=truedocument.getElementById("dwindow").onmousemove=drag_drop}function loadwindow(url,width,height){if (!ie5&&!ns6)window.open(url,"" ,"width=width,height=height,scrollbars=1")else{document.getElementById("dwindow").style.display=''document.getElementById("dwindow").style.width=initialwidth=width+ "px"document.getElementById("dwindow").style.height=initialheight=height+ "px"document.getElementById("dwindow").style.left="30px"document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30+ "px" : iecompattest().scrollTop*1+30+ "px"document.getElementById("cframe").src=url}}function maximize(){if (minrestore==0){minrestore=1 //maximize windowdocument.getElementById("maxname").setAttribute("src" ,"restore.gif")document.getElementById("dwindow").style.width=ns6? window.innerWidth-20+ "px" : iecompattest().clientWidth+ "px"document.getElementById("dwindow").style.height=ns6? window.innerHeight-20+ "px" : iecompattest().clientHeight+ "px"}else{minrestore=0 //restore windowdocument.getElementById("maxname").setAttribute("src" ,"max.gif")document.getElementById("dwindow").style.width=initialwidthdocument.getElementById("dwindow").style.height=initialheight}document.getElementById("dwindow").style.left=ns6? window.pageXOffset+ "px" : iecompattest().scrollLeft+ "px"document.getElementById("dwindow").style.top=ns6? window.pageYOffset+ "px" : iecompattest().scrollTop+ "px"}function closeit(){document.getElementById("dwindow").style.display="none"}function stopdrag(){dragapproved=false;document.getElementById("dwindow").onmousemove=null;document.getElementById("dwindowcontent").style.display="" //extra}</script>

Adesso inseriamo questo codice all'interno del tagbody, preferibilmente alla fine dellapagina:

<div id="dwindow" style="position:absolute;background-color:#EBEBEB;cursor:hand;left:0px;top:0px;display:none" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false"><div align="right" style="background-color:navy"><img src="max.gif" id="maxname" onClick="maximize()"><img src="close.gif" onClick="closeit()"></div><div id="dwindowcontent" style="height:100%"><iframe id="cframe" src="" width=100% height=100%></iframe></div></div><script>

Lo script utilizza anche alcune immagini, che abbiamoinserito qui sotto. Basterà copiarle nella cartelladove è presente la pagina con lo script.

Per richiamare lo script ci sono due modi: il primi, prevedeche la popup si apra automaticamente, il secondo prevede cheil popup si apra con un click su un link.

Per la prima soluzione:

<script>if (ns6)window.onload=new Function('loadwindow("http://www.geocities.com" ,600,400)')elseloadwindow("http://www.geocities.com" ,600,400)</script>

http://www.geocities.com è il linkche si aprirà nella popup, mentre 600e 400 sono le dimensioni della popup.

Per la seconda soluzione:

<a href="javascript:loadwindow('http://www.geocities.com',600,400)">Geocities</a>

Modificando sempre l'url e le dimensioni della finestra,come nella prima soluzione.

Per problemi relativi al suo utilizzo potete consultare ilnostro forum di discussione.







Ti potrebbe interessare anche

commenta la notizia