Ciao a tutti,
arrivo subito al dunque: ho un tasto di input in una pagina html che al click deve generare una semplicissima funzione, vale a dire aprire una nuova finestra del browser in popup (precisamente sarà una pagina di action). Io ho creato il seguente codice, però alla fine dell'implementazione mi sono accorto che non va bene, in quanto quello che apro io non è altro che un div inizialmente nascosto. In realtà io devo aprire una nuova finestra del browser con effetto fade!
Come posso fare? Io vorrei avere semplicemente il controllo del popup con jquery per poter attribuire degli effetti carini.
Grazie e buon fine settimana
arrivo subito al dunque: ho un tasto di input in una pagina html che al click deve generare una semplicissima funzione, vale a dire aprire una nuova finestra del browser in popup (precisamente sarà una pagina di action). Io ho creato il seguente codice, però alla fine dell'implementazione mi sono accorto che non va bene, in quanto quello che apro io non è altro che un div inizialmente nascosto. In realtà io devo aprire una nuova finestra del browser con effetto fade!
Come posso fare? Io vorrei avere semplicemente il controllo del popup con jquery per poter attribuire degli effetti carini.
Grazie e buon fine settimana
Codice:
<input type="button" class="cliccaqui" value="notifiche" />
<div id="sfondo_nero"></div>
<div class="finestra_popup"> TESTO </div>
Codice:
<style>
#sfondo_nero{
background-color:#000000;
cursor:pointer;
height:100%;
width:100%;
left:0;
top:0;
position:fixed;
opacity: 0.65;
-moz-opacity: 0.65;
filter:alpha(opacity=65);
z-index:1000;
display:none;
}
.finestra_popup{
background-color:#FFFFFF;
border:3px solid #AAAAAA;
padding:5px;
position:fixed;
z-index:1001;
display: none;
width: 350px;
height: auto;
left: 50%;
top: 50%;
margin-left: -175px;
margin-top: -175px;
text-align:center;
-webkit-box-shadow: 0px 0px 10px #525252;
-moz-box-shadow: 0px 0px 10px #525252;
}
</style>
Codice:
<script>
$(document).ready( function(){
$(".cliccaqui").click(function(){
$(".finestra_popup").fadeIn("slow");
$("#sfondo_nero").css("display", "block");
$("#sfondo_nero").click(function(){
$("#sfondo_nero").css("display", "none");
$(".finestra_popup").fadeOut("slow");
});
});
});
</script>