Salve a tutti,
mi sto cimentando con le jquery, adesso però mi sto incasinando con questo che all'apparenza sembrava una stupidaggine... sicuramente lo è
ammettiamo che io abbia il mio index.html..
all'inizio del body metto
<div id="popup">
<div id="close">X</div> <h2>Titolo popup</h2> <p>Contenuto popup.</p> </div>
per il CSS
h1, h2{
color:orange; font-size:24px; margin-bottom:20px;}#hover{ position:absolute; background:black; width:100%; height:100%; opacity:.7;}#popup{ position:absolute; width:600px; height:200px; background:#fff; left:50%; top:50%; border-radius:10px; padding:20px; margin-left:-310px; /* width/2 + padding-left */ margin-top:-110px; /* height/2 + padding-top */}#close{ position:absolute; background:black; color:white; right:-10px; top:-10px; border-radius:50%; width:20px; height:20px; line-height:20px; text-align:center; font-size:8px; cursor:pointer; }
jquery
$(document).ready(function(){
//chiusura al click esterno popup $("#hover").click(function(){ $(this).fadeOut(); $("#popup").fadeOut(); }); //chiusura al click sulla x $("#close").click(function(){ $("#hover").fadeOut(); }); });
eee.... niente... non si vede niente... dove sbaglio? la jquery viene da un sito trovato per caso.. no ricordo la fonte sinceramente... comunque è basilare...