Boite Modal CSS3 sans JavaScript

 

Cette boite modal uniquement en CSS3, sans JavasCript permet d'être accessible sur les navigateur moderne, du fait de l'utilisation de balise HTML5.
Cependant elle est configurable à souhait au niveau des couleur, vous pouvez aussi remplacer la croix par une image, cette boite modal je l'utilise dans un projet pour y afficher une carte Google Map, mais elle peut servir à d'autres choses.

Ci-dessous le code Html tel qu'il doit être codé, il vous suffira de remplacer le texte dans la balise (section).

                  <div id="oModalsearch" class="cModal">
                        <div>
                          <header>
                            <a href="#fermer" title="Fermer la fenêtre" class="droite"><img src="close.png"></a> 
                            <h3>Rechercher un article</h3>
                          </header>
                          <section style="margin-bottom:0;padding-bottom:0;margin-top:0;padding-top:0;">
                              <iframe frameborder="0" height="300" src="http://www.developpez.com/" style="border:0" width="100%"></iframe>
                          </section>
                          <footer>
                           <a href="#fermer" class="button droite" title="Fermer la fenêtre">Fermer</a>
                          </footer>
                        </div>
                      </div>
                      
                      <a href="#oModalsearch" class="linktuto">Ouvrir le popup</a>
              

Ci-dessous le code CSS de la boite modal.

                  .cModal{
                      position: fixed;
                      z-index: -99999;
                      top: 0;
                      right: 0;
                      bottom: 0;
                      left: 0;
                      background: rgba(0, 0, 0, 0.8);
                      opacity:0;
                      -webkit-transition: opacity 200ms ease-in;
                      -moz-transition: opacity 200ms ease-in;
                      transition: opacity 200ms ease-in;
                      pointer-events: none;
                    }
                    
                  .cModal:target{ 
                    opacity:1;
                    z-index: 99999;
                    pointer-events: auto;
                  }
                  
                  .cModal:target > div {
                      margin: 10% auto;
                      transition: all 0.2s ease-in-out;
                      -moz-transition: all 0.2s ease-in-out;
                      -webkit-transition: all 0.2s ease-in-out;
                      /*lorsque le contenu dépasse la fenêtre, le scroll se met en place
                      overflow-y: auto; 
                      max-height: 400px;
                      */
                      }
                      
                  .cModal > div {
                      max-width: 600px;
                      position: relative;
                      margin: 1% auto;
                      padding: 8px 8px 8px 8px;
                      border-radius: 5px;
                      background: #fff;
                      transition: all 0.2s ease-in-out;
                      -moz-transition: all 0.2s ease-in-out;
                      -webkit-transition: all 0.2s ease-in-out;
                      }
                      
                  .cModal > div header,.cModal > div footer {
                      border-bottom: 1px solid #e7e7e7;
                      border-radius: 5px 5px 0 0;
                      }
                      
                  .cModal footer {
                      border:none;
                      border-top: 1px solid #e7e7e7;
                      border-radius: 0 0 5px 5px;
                      background-image: -ms-linear-gradient(top, #EFEFEF 0%, #B0B0B0 100%);
                      background-image: -moz-linear-gradient(top, #EFEFEF 0%, #B0B0B0 100%);
                      background-image: -o-linear-gradient(top, #EFEFEF 0%, #B0B0B0 100%);
                      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EFEFEF), color-stop(1, #B0B0B0));
                      background-image: -webkit-linear-gradient(top, #EFEFEF 0%, #B0B0B0 100%);
                      background-image: linear-gradient(to bottom, #EFEFEF 0%, #B0B0B0 100%);
                      height:24px;  
                  
                      }
                  .cModal header {height:20px;}	
                  .cModal > div h3 {margin:0;}	
                      
                  .cModal > div > header {padding:5px;}
                  .cModal > div section {padding:10px;}
                  .cModal > div > footer {padding:5px;}
                  
                  .cModal > div section{background-color:#fff;}
                  .cModal > div header{
                      background-image: -ms-linear-gradient(top, #EFEFEF 0%, #B0B0B0 100%);
                      background-image: -moz-linear-gradient(top, #EFEFEF 0%, #B0B0B0 100%);
                      background-image: -o-linear-gradient(top, #EFEFEF 0%, #B0B0B0 100%);
                      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EFEFEF), color-stop(1, #B0B0B0));
                      background-image: -webkit-linear-gradient(top, #EFEFEF 0%, #B0B0B0 100%);
                      background-image: linear-gradient(to bottom, #EFEFEF 0%, #B0B0B0 100%);  
                      
                      }
                  
                  header .droite{float:right;}
                  footer .droite{float:right;}
                      .button
                      {        
                          background-color: #ddd;
                          background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
                          background-image: -webkit-linear-gradient(top, #eee, #ccc);
                          background-image: -moz-linear-gradient(top, #eee, #ccc);
                          background-image: -ms-linear-gradient(top, #eee, #ccc);
                          background-image: -o-linear-gradient(top, #eee, #ccc);
                          background-image: linear-gradient(top, #eee, #ccc);
                          border: 1px solid #777;
                          padding: 0 0.5em;
                          font: bold 1em/2em Arial, Helvetica;
                          text-decoration: none;
                          color: #333;
                          text-shadow: 0 1px 0 rgba(255,255,255,.8);
                          -moz-border-radius: .2em;
                          -webkit-border-radius: .2em;
                          border-radius: .2em;
                          -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
                          -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
                          box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
                          font-size:11px;
                      }
                      
                      .button:hover
                      {
                          background-color: #eee;        
                          background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
                          background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
                          background-image: -moz-linear-gradient(top, #fafafa, #ddd);
                          background-image: -ms-linear-gradient(top, #fafafa, #ddd);
                          background-image: -o-linear-gradient(top, #fafafa, #ddd);
                          background-image: linear-gradient(top, #fafafa, #ddd);
                      }
                      .button:focus
                      {
                          outline: 0;
                          background: #fafafa;
                      }    
               

La démo utilise les mêmes codes que ceux cités dans les onglets de code.



Ci-dessous le lien vers la démo. Démo