Michele Basso
a- a+

Nuovissimo tipo di finestra PopUp

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

Per vedere un esempio dello script, clicca qui.

Il primo passo, è mettere questo codice all'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.htm

var dragapproved=false
var minrestore=0
var initialwidth,initialheight
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all

function 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.clientX
offsety=ie5? event.clientY : e.clientY
document.getElementById("dwindowcontent").style.display="none" //extra
tempx=parseInt(document.getElementById("dwindow").style.left)
tempy=parseInt(document.getElementById("dwindow").style.top)

dragapproved=true
document.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 window
document.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 window
document.getElementById("maxname").setAttribute("src" ,"max.gif")
document.getElementById("dwindow").style.width=initialwidth
document.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 tag body, preferibilmente alla fine della pagina:

<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 abbiamo inserito qui sotto. Basterà copiarle nella cartella dove è presente la pagina con lo script.

Per richiamare lo script ci sono due modi: il primi, prevede che la popup si apra automaticamente, il secondo prevede che il 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)')
else
loadwindow("http://www.geocities.com" ,600,400)
</script>

http://www.geocities.com è il link che si aprirà nella popup, mentre 600 e 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 il nostro forum di discussione.







Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Graziano
Hai qualche domanda da fare?