Overlay html

**davide1996** · 24-02-2016, 19:20

Ragazzi domanda stupidissima , ma quando creo un Overlay al posto dell' # che link devo mettere?

<aid="overlay_id"href="#">Clicca qui!</a>

Grazie mille!!

**Vincent.Zeno** · 24-02-2016, 20:01

immagino che il codice sia questo:

codice:

<a id="overlay_id" href="#">Clicca qui!</a>

aggiungi a # l'id del tuo elemento (es: href="#idElemento")

ricorda di formattare correttamente il codice e di usare il tag CODE per postare codice, grazie.

**davide1996** · 24-02-2016, 20:16

Grazie mille per la risposta ma non ho risolto mi fai capire cosa sbaglio?

Tra i tag body

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

<aid="apri_fpol"href="#fpol">Clicca qui!</a>

con annessi script e css

**Vincent.Zeno** · 24-02-2016, 21:17

ricorda di formattare correttamente il codice, e di usare il tag CODE per postare codice sul forum; grazie. (se ti aiuta usa il tasto # del modulo in modalità avanzata)

qui si presuppone che il div "fpol" sia chiuso e che cliccando su "clicca qui" questo si apra, cliccando invece su img "close" questo si chiuda.
ma si presuppone solo, visto che non conosciamo lo js e il css che controllano gli eventi

codice:

<div id="fpol">
  <div class="finestra">
    <div class="chiudi"><a id="chiudi_fpol" href="#fpol"><img src="close.jpg"/></a></div>
    <div class="testo">bla bla bla...</div>
  </div>
</div>

<a id="apri_fpol" href="#fpol">Clicca qui!</a>

**davide1996** · 24-02-2016, 21:41

In pratica al posto di aprirmi un overlay mi carica una nuova pagina con link finale #fpol
Codice css tra i tag style

code
div#fpol { position: absolute; top: 0; left: 0; width: 100%; z-index: 98; display: none; text-align:left; }#fpol .finestra { position: absolute; width: 500; height: 200; 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; }

Script:

$(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());
});

**Vincent.Zeno** · 24-02-2016, 21:46

per favore inserisci il codice nel tag CODE, usa la modalità avanzata e clicca su #. così ti sarà più comprensibile

ma l'esempio che hai trovato (mi pare non sia scritto da te) è tutto qui?

**davide1996** · 24-02-2016, 21:52

L'esempio è questo: http://blog.mrwebmaster.it/2011/06/2...on-jquery.html, solo che non capisco dove sbaglio seguo tutti i passaggi inserisco l'id dopo l'# e non funziona..

Se riesci a farmi capire come sistemare il tutto te ne sono grato

**Vincent.Zeno** · 24-02-2016, 22:35

Per realizzare questo effetto utilizzeremo la libreria jQuery che, come al solito, ci facilita la vita

in effetti le guide non dovrebbero dare per scontato certe nozioni...

in sostanza, se non carichi la libreria, lo script non può funzionare.
ti scrivo l'esempio completo:

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>

non fare caso al doctype, non è vincolante. usa il dtd che ti serve.

edit: boia... anche il codice errato negli esempi

Discussione: Overlay html

Strumenti discussione

Ricerca discussione

Visualizza

Overlay html

Tag per questa discussione

Permessi di invio