Finestra pop up che oscura il sito

[n.rik]

Finestra pop up che oscura il sito

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...

[meis]

Ho preparato questo jsfiddle: jsfiddle.net/aJsGm/1/

A parte aver modificato un po' i css, in modo che anche in quello spazio ristretto venisse fuori bene, ti sei dimenticato di inglobare tutto l'html in un div id='hover'.

Lì funziona bene, prova e facci sapere!