in effetti le guide non dovrebbero dare per scontato certe nozioni...Per realizzare questo effetto utilizzeremo la libreria jQuery che, come al solito, ci facilita la vita
in sostanza, se non carichi la libreria, lo script non può funzionare.
ti scrivo l'esempio completo:
non fare caso al doctype, non è vincolante. usa il dtd che ti serve.codice:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Senza nome 1</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <style type="text/css"> div#fpol { position: absolute; top: 0; left: 0; width: 100%; z-index: 98; display: none; text-align:left; } #fpol .finestra { position: absolute; width: 500px; height: 200px; top: 50%; left: 50%; margin-top: -100px; margin-left: -250px; z-index: 99; background: #333333; } #fpol .finestra img { border: none; margin: 5px;} #fpol .finestra .chiudi { text-align: right; } #fpol .finestra .testo { padding: 5px; color: #FFFFFF; } </style> <script type="text/javascript"> $(document).ready(function(){ // Aggiusto la larghezza del contenitore impostandola a tutta pagina $("#fpol").css("height", $(document).height()); // Quando il link viene cliccato apro la finestra overlay $("#apri_fpol").click(function(){ $('html, body').animate({ scrollTop: 0 }, 0, function() { $("#fpol").fadeIn(); return false; }); }); // Quando viene cliccato il link di chiusura... chiudo! $("#chiudi_fpol").click(function(){ $("#fpol").fadeOut(); return false; }); }); // Aggiusto l'altezza del contenitore in caso di resize della finestra del browser $(window).bind("resize", function(){ $("#fpol").css("height", $(window).height()); }); </script> </head> <body> <a id="apri_fpol" href="#" onclick="return false" >Clicca qui!</a> <div id="fpol"> <div class="finestra"> <div class="chiudi"><a id="chiudi_fpol" href="#"><img src="close.jpg"/></a></div> <div class="testo">bla bla bla...</div> </div> </div> </body> </html>
edit: boia... anche il codice errato negli esempi
Rispondi quotando
