Popup Modal Image

Fenêtre « modal » image

Popup modal active à l'ouverture de la page

Popup avec image

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=0cbcc3ae_978e_4417_af1b_7fe68da67566"></a>
                        <h3>Fenêtre « modal » image </h3>
                        </header>
                        <div>
                        <div style="text-align:center"><img  alt=""  src="wa_res/icons/2023-06-13-1815.jpg?t=0cbcc3ae_978e_4417_af1b_7fe68da67566">
                        </div>
                        </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>
                        <!-- /Modal -->

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: 500px;
                          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