Disclaimer per i contenuti del Blog


DISCLAIMER:Questo blog non rappresenta una testata giornalistica in quanto viene aggiornato senza alcuna periodicità . Non può pertanto considerarsi un prodotto editoriale ai sensi della legge n° 62 del 7.03.2001.
L'autore non è responsabile per quanto pubblicato dai lettori nei commenti ad ogni post. Verranno cancellati i commenti ritenuti offensivi o lesivi dell’immagine o dell’onorabilità di terzi, di genere spam, razzisti o che contengano dati personali non conformi al rispetto delle norme sulla Privacy. Alcuni testi o immagini inserite in questo blog sono tratte da internet e, pertanto, considerate di pubblico dominio; qualora la loro pubblicazione violasse eventuali diritti d'autore, vogliate comunicarlo via email. Saranno immediatamente rimossi. L'autore del blog non è responsabile dei siti collegati tramite link, del loro contenuto che può essere soggetto a variazioni nel tempo ne degli eventuali danni derivanti dall'utilizzo proprio od improprio delle informazioni presenti nei post.

mercoledì 26 marzo 2014

Simulare un popup con DIV in una pagina html


Realizzando pagine html può far comodo utilizzare dei popup per comunicare all'utente informazioni o per richiedere dati ulteriori. I normali popup a me non sono mai piaciuti, principalmente per diversi motivi:
  • possono nascondersi dietro alla pagina principale
  • possono non essere visualizzati se al browser è stato detto si evitarli
  • può essere complesso far interagire il codice del popup con l'html della pagina di partenza

E' pur vero che esistono decine di librerie Javascript che permettono di simulare i popup ma quella che propongo oggi è una soluzione, sebbene spartana, molto sintetica e semplice da implementare.

Ho utilizzato comunque jQuery per aumentare la leggibilità del codice ma questa dipendenza è facilmente evitabile modificando un paio di righe ed utilizzando JS puro.

Questa è la porzione HTML

<!DOCTYPE html>
<!--[if lt IE 9 ]> <html class="ie8-or-less"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
 <head>
  <meta charset="UTF-8">
  <title>POPUP</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="index.css">
 </head>
 <body>
  <div class="page-content">
  <h1>POPUP simulato con DIV</h1>
   Questo è il contenuto della pagina Web, 
   <a href = "javascript:void(0)" onclick = "$('#popup1, #overlay').css('display', 'block')">
    fai click qui per aprire il popup...
   </a>
  </div>

<!-- ***************** Porzione di HTML per la generazione del PopUp ***************** -->
  <!-- Overlay per l'oscuramento dello sfondo -->
  <div id="overlay" class="ovl">
  </div>

  <!-- E' possibile gestire più popup assegnando ad ognuno un diverso ID  -->
  <!-- ricordandosi di modificare i riferimenti nei due 'onclick', avendo -->
  <!-- cura di lasciare inalterato il riferimento all'ID 'overlay' e      -->
  <!-- modificando solamente il riferimento all'ID del popup desiderato   -->
  <div id="popup1" class="popup"> 
   <div class="title">
    <div class="title-row">
     <div class="title-description">
      Questo è il titolo della finestra...
     </div>
     <div class="title-close">
      <a href = "javascript:void(0)" onclick = "$('#popup1, #overlay').css('display', 'none')">
       <img src="close.png" border=0>
      </a>
     </div>
    </div>
   </div>
   Contenuto del popup
  </div>
<!-- ********************************************************************************** -->

 </body>
</html>

e questo il relativo CSS

 .ie8-or-less body{
 width: 100%;
 margin: 0px;   
}

.ie8-or-less .page-content {    
 width: 99%;
 margin: auto;
 padding: 5px;
}

.ovl{
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 background-color: black;
 z-index: 1001;
 -moz-opacity: 0.7;
 opacity: .70;
 filter: alpha(opacity=70);
}

.popup {
 display: none;
 position: absolute; 
 top: 25%;
 left: 25%;
 width: 50%;
 height: 50%;
 padding: 4px 4px 4px 4px;
 border: 2px solid white;
 border-radius: 5px;
 -moz-border-radius: 5px;
 background-color: white;
 z-index: 1002;
 overflow: auto;
}

.title {
 display: table;
 background-color: blue;
 color: white;
 font-weight: bold;
 font-size: 150%;
 padding: 4px;
 margin: auto;
 width: 99%;
 border-radius: 5px;
 -moz-border-radius: 5px;
}

.title-row{
 display: table-row;
 width: 100%;
}

.ie8-or-less .title-description{
 display: block;
 float: left;
 width: auto;
}

.title-description{
 display: table-cell;
 float: left;
 width: auto;
}

.ie8-or-less .title-close{
 display: block;
 float: right;
 width: 16px;
}

.title-close{
 display: table-cell;
 width: 16px;
}

Come si può notare dalle prime righe di html, ho dovuto inserire un test del browser utilizzato per intercettare Internet Explorer 8 (bestia nera) in modo da poter adattare il css al suo comportamento non proprio standard. E' possibile vedere una demo funzionante o scaricare i files che compongono il progetto.

Il funzionamento del tutto è molto semplice, il primo <DIV> con id 'overlay' serve ad oscurare il contenuto della pagina web (nero con opacità al 70%) ed ha inizialmente impostato il parametro display a none; il secondo <DIV>, quello con id 'popup1' funge da contenitore del nostro popup, anche lui inizialmente ha il parametro display impostato a none. Facendo click sul link il parametro display dei due <DIV> viene impostato a block rendendoli visibili entrambi. Utilizzando uno z-index più alto mi assicuro che il <DIV> 'popup1' venga visualizzato al di sopra del resto.

Facendo click sull'immagine che simula il pulsante di chiusura riporto il valore del parametro display dei due <DIV> a none simulando la chiusura del popup.
Semplice ed efficace...

Lo script è stato testato con IE8 e con le ultime versioni di Chrome, Firefox, Safari per Windows/iOS ed Opera.

Nessun commento:

Posta un commento