18119 sujets

Questions générales et questions de débutants

[Résolu] Ouverture de petite fenêtre sur l'index

Bonjour à toutes et à tous.
Je souhaite temporairement suite à un futur déménagement de magasin, lors du chargement de ma page index, afficher une fenêtre plus petite et centrée, contenant des informations sur ce déménagement (image + texte).
Je souhaite que cette "fenêtre" ne s'ouvre que quelques secondes pour donner l'info et se ferme automatiquement ou avec une petite croix pour la fermé.
D'avance merci de votre aide.

le site en question : https://www.pic-et-coud.fr
Modifié par BruChri (15 Mar 2026 - 11:20)
Bonjour, fait une recherche avec ton moteur de recherche préférer sur le terme "fenêtre modale". Tu en trouvera en full CSS ou avec JS. Exemple :
https://jolicode.com/blog/une-fenetre-modale-accessible
https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/dialog

Ou en utilisant l’attribut popover
https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Global_attributes/popover

Attention à laisser suffisamment de temps au visiteur pour prendre connaissance de l'info. C'est pourquoi je ne suis pas favorable à une fermeture automatique mais sur action de l'utilisateur.

Édit: A lire https://www.alsacreations.com/article/lire/1922-dialog-modal-popover-la-synthese.html
Modifié par casper2 (15 Mar 2026 - 13:23)
casper2 merci de tes solutions.

Attention à laisser suffisamment de temps au visiteur pour prendre connaissance de l'info. C'est pourquoi je ne suis pas favorable à une fermeture automatique mais sur action de l'utilisateur. Je suis d'accord avec toi sur ce sujet.

Par contre dans les solutions proposées et celle que j'avais également trouvé sur internet, aucun Modal ne s'ouvre automatiquement à l'ouverture de l'index.html. Il faut toujours un bouton pour appeler le Modal.

Bon je continu mes recherches et mes essais.
Modifié par BruChri (15 Mar 2026 - 14:29)
BruChri a écrit :

Il faut toujours un bouton pour appeler le Modal.

Oui c'est ce qu'il ce fait généralement. Vous pouvez modifier ce comportement avec du JS.
L'événement load pourrait vous être utile
https://developer.mozilla.org/fr/docs/Web/API/Window/load_event

BruChri a écrit :

Par contre dans les solutions proposées et celle que j'avais également trouvé sur internet, aucun Modal ne s'ouvre automatiquement à l'ouverture de l'index.html.

Vous ne trouverez que très rarement ce que vous souhaitez à la ligne près. C'est à vous à écrire la fonctionnalité dont vous avez besoin. Smiley cligne
Au besoin poster le code que vous avez écrit
Je vois que vous utilisez bootstrap 5. Il y a un composant intégré
https://getbootstrap.com/docs/5.3/components/modal/

Édit : En reprenant la documentation de bootstrap, voici une page de démo : 

<!doctype html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>

<body>
  <h1>Hello, world!</h1>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title fs-5" id="exampleModalLabel">Modal title</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          votre contenu.....
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
    crossorigin="anonymous"></script>
  <script>
    window.addEventListener("load", (event) => {
      const myModal = new bootstrap.Modal('#exampleModal', {})
      const modalToggle = document.getElementById('exampleModal');
      myModal.show(modalToggle);
    });
  </script>
</body>

</html>

Modifié par casper2 (15 Mar 2026 - 18:21)
Désolé d'avoir mis résolu sur le sujet, car je n'avais pa vu venir le problème sur les téléphone portable. Sur les pc tout va bien.
L'adresse du site temporaire : http://0coolmsn.free.fr/
Merci de votre aide pour rendre le Modal responsive et/ou mon image.
Prévenir un modérateur
Répondre au sujet
Aller à