Come aprire un popup, una nuova finestra utilizzando javascript
I popup sono quelle finestre che vengono aperte, spesso in maniera automatica e contenenti inserzioni pubblicitarie, durante la navigazione su un sito internet.
Vediamo come aprire i popup utilizzando javascript.
Come prima cosa dobbiamo creare all’interno dei tag <HEAD></HEAD> la nostra funzione denominata popup().
Javascript
function popup(url,titolo,larghezza,altezza) {
window.open(url,titolo,'width='+larghezza+',height='+altezza);
}
Questa funzione riceve una serie di parametri, in questo caso l’url di destinazione, il titolo, la larghezza ed infine l’altezza della nostra nuova finestra.
Per aprire il popup utiliziamo la funzione open.
L’elenco completo dei parametri disponibili sono reperibili al seguente link: w3schools
Create la nostra funzione dobbiamo assegnarla ad un evento javascript come ad esempio: onClick,onSubmit… qui sotto alcuni esempi:
HTML
<h1>Aprire un Popup con un Button</h1>
<button onclick='popup("http://www.google.it","Google","500","500")'>Apri Popup Metodo 1</button><br/>
<h1>Aprire un Popup con un Form</h1>
<form method='post' action='<?php echo $_SERVER['PHP_SELF'] ?>' onsubmit='popup("http://www.google.it","Google","500","500")'>
<input type='submit' value='Apri Popup'/>
</form>
<h1>Aprire una pagina all'interno di un popup </h1>
<form name='popupform' method='post' action='<?php echo $_SERVER['PHP_SELF'] ?>' onsubmit='aprifinestra()'>
<input value='https://www.culturedigitali.com/' type="text" id='popupbtn'/><input type='submit' value='Apri Popup'/>
</form>
Esempio Completo
<!DOCTYPE html>
<html>
<head>
<title>Come aprire un popup con javascript</title>
<script type="text/javascript">
function popup(url,titolo,larghezza,altezza) {
window.open(url,titolo,'width='+larghezza+',height='+altezza);
}
function aprifinestra(){
var url = document.getElementById("popupbtn").value;
popup(url,"Google","500","500");
}
</script>
<style>
h1 {font-size: 14px; color: #333; font-family: 'Arial'}
</style>
</head>
<body>
<h1>Aprire un Popup con un Button</h1>
<button onclick='popup("http://www.google.it","Google","500","500")'>Apri Popup Metodo 1</button><br/>
<h1>Aprire un Popup con un Form</h1>
<form method='post' action='<?php echo $_SERVER['PHP_SELF'] ?>' onsubmit='popup("http://www.google.it","Google","500","500")'>
<input type='submit' value='Apri Popup'/>
</form>
<h1>Aprire una pagina all'interno di un popup </h1>
<form name='popupform' method='post' action='<?php echo $_SERVER['PHP_SELF'] ?>' onsubmit='aprifinestra()'>
<input value='https://www.culturedigitali.com/' type="text" id='popupbtn'/><input type='submit' value='Apri Popup'/>
</form>
</body>
</html>