/* Alcune righe di codice di convenzione */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
/* Ci servirà per oscurare la pagina */
#nero{
/* Imposto il colore nero */
background-color:#000000;
/* Imposto come puntatore la manina */
cursor:pointer;
/* Imposto i valori di altezza e larghezza a 100% */
height:100%;
width:100%;
/* Ci servirà in modo tale che non ci siano margini */
left:0;
top:0;
/* Impostiamo come posizione la fissa */
position:fixed;
/* Aggiungiamo i codice per opacizzare lo sfondo. */
opacity: 0.65;
-moz-opacity: 0.65;
filter:alpha(opacity=65);
/* E' utile nel caso in cui ci siano altri oggetti in posizione assoluta o fissa */
z-index:1000;
/* Lo rendiamo non visibile */
display:none;
}
 
/* Questo sarà il nostro popup */
.messaggio{
/* Impostiamo il bianco come colore di sfondo e creiamo un piccolo bordo */
background-color:#FFFFFF;
border:3px solid #AAAAAA;
/* Impostiamo un leggero margine interno */
padding:5px;
/* Impostiamo la posizione come fissa. Ci servirà in modo tale che il popup segua lo scrolling della pagina */
position:fixed;
/* Impostiamo lo z-index come 1001. Lo z-index è una sorta di gestore di livelli. Chi avrà il numero maggiore si troverà davanti a chi ha numero minore. Facile no? */
z-index:1001;
/* Rendiamo il popup non visibile */
display: none;
/* Impostiamo la grandezza del box. Ci servirà in quanto così possiamo facilmente impostare il box centrato nella pagina */
width: 350px;
height: 350px;
/* Impostiamo i valori di top e left a 50% */
left: 50%;
top: 50%;
/* Il margin left e top dovrà essere pari alla metà delle dimensioni del box. Ci servirà per centrare il box */
margin-left: -175px;
margin-top: -175px;
text-align:center;
/* Impostiamo un'ombra con CSS3 */
-webkit-box-shadow: 0px 0px 10px #525252;
-moz-box-shadow: 0px 0px 10px #525252;
}

<button id="cliccaqui" style="width: 100px; height: 50px;">
Clicca qui!
</button>
<div class="messaggio">
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures.</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>

$(document).ready(function () {
	//Al click dell'id "cliccaqui"..
	$("#cliccaqui").click(function(){
 
		//Apparirà il div messaggio. FadeIn cambia il display del div a cui si riferisce da none a block.
		$(".messaggio").fadeIn("slow");
		//Allora perchè non usarlo anche qua? Perchè fadeIn, annulla anche la trasparenza, quindi o chiamiamo prima un fadeIn e poi modifichiamo il valore di opacità, o andiamo a modificare "manualmente" il css del div.
		$("#nero").css("display", "block");
 
		//Al click del div nero (cioè tutto lo sfondo dietro il popup)
			$("#nero").click(function(){
				//Scompare l'effetto scuro e il messaggio
				$("#nero").css("display", "none");
				$(".messaggio").fadeOut("slow");
			});
	});
});

n
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>
 
<button id="cliccaqui" style="width: 100px; height: 50px;">
Clicca qui!
</button>
<div class="messaggio">
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures.</div>

<img id="chiudi" src="chiudi.gif" alt="Chiudi il popup" />

#chiudi{
cursor:pointer;
position:absolute;
right:0;
top:0;
width:34px;
}

$("#chiudi").click(function(){
				$("#nero").css("display", "none");
				$(".messaggio").fadeOut("slow");
			});