Popup Modal Image

Popup modal active à l'ouverture de la page

Popup avec image

Code à placer dans un élément HTML

                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                        <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                        <img  alt=""   src="wa_res/icons/2023-06-13-1815.jpg?t=62d365a2_8bd9_4428_ba7b_8b28f0e5140a" class="">
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                        </div>
                        </div>
                        </div>
                        </div>
                        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
                        <script>
                        var myModal = new bootstrap.Modal(document.getElementById("exampleModal"));
                        myModal.show();
                        </script>
                        <!-- /Modal -->

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

                        .modal-body {
                        text-align:center;
                        }
                        .modal-body img {
                         max-width: 360px;
                        }
                        @media screen and (max-width: 575px) { 
                        .modal-body img {
                         max-width: 280px;
                        }
                        }

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

Mis en place à partir de la Source : https://codepen.io/paulobrien/pen/bGBdagj

Validation W3C

Slider et Image

Accordion

Divers 1

Divers 2

Mascarade

Lumière

Couché de soleil

Le Crozon