Popup Modal Texte

Fenêtre « modal » texte

Lorem ipsum dolor sit amet, adipiscing elit. Mauris nec odio ut ipsum rutrum aliquet. Praesent eget risus at sapien dignissim aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In justo pede, accumsan sed, lacinia at, aliquam vitae, sem. Pellentesque a mauris vitae erat malesuada consectetur. Morbi diam risus, sollicitudin eu, laoreet et, cursus vel, enim. Aenean justo. Pellentesque id est a ipsum porttitor faucibus. Aliquam erat volutpat. Proin non odio. Integer laoreet dolor eu justo. Fusce vitae mauris ac pede consequat pulvinar. Ut auctor feugiat libero. Nullam consequat eros ac lacu.

Popup modal active à l'ouverture de la page

Popup avec texte

Code à placer dans un élément HTML

                        <!-- Modal -->
                        <div id="oModal" class="oModal">
                          <div>
                            <header>
                              <a href="#" title="Fermer la fenêtre" class="droite"><img  alt="" src="wa_res/icons/croix-20.png?t=f1354161_9709_45b0_b568_87c1bfddaa21"></a>
                               <h3>Fenêtre « modal » texte</h3>
                             </header>
                             <div>
                              <p>Lorem ipsum dolor sit amet, adipiscing elit. Mauris nec odio ut ipsum rutrum aliquet. Praesent eget risus at sapien dignissim aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In justo pede, accumsan sed, lacinia at, aliquam vitae, sem. Pellentesque a mauris vitae erat malesuada consectetur. Morbi diam risus, sollicitudin eu, laoreet et, cursus vel, enim. Aenean justo. Pellentesque id est a ipsum porttitor faucibus. Aliquam erat volutpat. Proin non odio. Integer laoreet dolor eu justo. Fusce vitae mauris ac pede consequat pulvinar. Ut auctor feugiat libero. Nullam consequat eros ac lacu. </p>
                        
                             </div>
                             <footer class="cf">
                              <a href="#" class="btn droite" title="Fermer la fenêtre">Fermer</a>
                             </footer>
                          </div>
                        </div>
                        
                        <script>
                        document.addEventListener('DOMContentLoaded', function() {
                           window.onload = window.location.href = '#oModal';
                        });
                        </script>

Code à placer dans le CSS de lélément HTML

                                    .cf:before,
                                    .cf:after {
                                      content:"";
                                      display:table;
                                    }
                                    .cf:after {
                                      clear:both;
                                    }
                                    .droite {
                                      float:right;
                                    }
                                    .oModal {
                                      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 400ms ease-in;
                                      -moz-transition: opacity 400ms ease-in;
                                      transition: opacity 400ms ease-in;
                                      pointer-events: none;
                                    }
                                    .oModal img {
                                     max-width: 100%;
                                     max-height:500px;
                                    }
                                    .oModal:target {
                                      opacity:1;
                                      pointer-events: auto;
                                    }
                                    .oModal:target > div {
                                      transition: all 0.4s ease-in-out;
                                      -moz-transition: all 0.4s ease-in-out;
                                      -webkit-transition: all 0.4s ease-in-out;
                                    }
                                    .oModal > div {
                                      max-width: 600px;
                                      position: relative;
                                      margin: 1% auto;
                                      padding: 8px 8px 8px 8px;
                                      border-radius: 5px;
                                      background: #fff;
                                      transition: all 0.4s ease-in-out;
                                      -moz-transition: all 0.4s ease-in-out;
                                      -webkit-transition: all 0.4s ease-in-out;
                                    }
                                    .oModal > div header,.oModal  { 
                                      border-bottom: 1px solid #e7e7e7;
                                      border-radius: 5px 5px 0 0;
                                    }
                                    .oModal  {
                                      border:none;
                                     border-top: 1px solid #e7e7e7;
                                      border-radius: 0 0 5px 5px;
                                    }
                                    .oModal > div h2 {
                                      margin:0;
                                    }
                                    .oModal > div .btn {
                                      float:right;
                                    border: 2px solid #e7e7e7;
                                    }
                                    .oModal > div div,.oModal > div > header, .oModal > div > footer {
                                      padding: 8px;
                                    }
                                    .$ a {
                                      outline: none;
                                      text-decoration: none;
                                    }

La popup est rechargée à l'actualisation de la page.

Validation W3C

Slider et Image

Accordion

Divers 1

Divers 2

Mascarade

Lumière

Couché de soleil

Le Crozon