Probleme ouverture fenetre modal depuis une autre page

Résolu

trigo-no Messages postés 5 Date d'inscription Statut Membre Dernière intervention -
trigo-no Messages postés 5 Date d'inscription Statut Membre Dernière intervention - 23 févr. 2026 à 19:42

Bonjour

Je voudrais ouvrier une fenetre modal depuis une page differente a celle ou elle est hebergée.

donc je fait un lien comme celui-ci

dans ma page j'ai

<a href="#id_menu" >Le menu </a>

fenetre modale

<div id="id_menu" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <header class="container"> 
        <a href="#" class="closebtn">X</a>
        titre
      </header>
      <div class="container">
        bla bla
      </div>
      <footer class="container">
        <p> <br> </p>
      </footer>
    </div>
  </div>
</div>

ma modale s'ouvre s'ouvre bien si je l'ouvre depuis ma_page

mais qund je veux l'ouvrir depuis autre_page

<a href="../ma_page/#mon_id>vers mon modal</a>

Mon texte appaait dans la page mais pas la fenetre modale.

Ou est le problème?

Merci pour votre attention

Afficher la suite

3 réponses

Réponse 1 / 3
Diablo76 Messages postés 344 Date d'inscription Statut Membre Dernière intervention 140
Salut,

Il te manque une guillemet :
```
<a href="../ma_page/#mon_id>vers mon modal</a>
```
```
<a href="../ma_page/#mon_id">vers mon modal</a>
```
0

trigo-no Messages postés 5 Date d'inscription Statut Membre Dernière intervention

Oups. excuses moi, c est une erreur de frappe quand j'ai poste le post.

Sur ma page j'ai bien guillement et ca ne fonctionne pas.

Diablo76 Messages postés 344 Date d'inscription Statut Membre Dernière intervention 140

il faut recréer la structure HTML de ta modale sur autre_page comme ceci :

Fichier ma_page :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma Page</title>

<style>
body {
  font-family: Arial, sans-serif;
}

/* MODALE cachée par défaut */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

/* Quand l'id est ciblé */
.modal:target {
  display: flex;
}

.modal-content {
  background: white;
  padding: 20px;
  width: 300px;
  border-radius: 8px;
}

.closebtn {
  float: right;
  text-decoration: none;
  font-weight: bold;
}
</style>

</head>
<body>

<h1>Ma Page</h1>

<div><a href="#id_menu">Ouvrir la modale</a></div>
<div><a href="autre_page.html#id_menu">Ouvrir la modale sur autre_page</a></div>

<div id="id_menu" class="modal">
  <div class="modal-content">
    <a href="#" class="closebtn">X</a>
    <h2>Titre</h2>
    <p>Contenu de la fenêtre modale</p>
  </div>
</div>

</body>
</html>

Fichier autre_page :

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Autre Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    /* Modale cachée */
    .modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      justify-content: center;
      align-items: center;
    }

    /* Quand l'ancre est ciblée */
    .modal:target {
      display: flex;
    }

    .modal-content {
      background: white;
      padding: 20px;
      width: 300px;
      border-radius: 8px;
    }

    .closebtn {
      float: right;
      text-decoration: none;
      font-weight: bold;
    }
  </style>

</head>

<body>

  <h1>Autre Page</h1>

  <a href="#id_menu">Ouvrir la modale</a>

  <div id="id_menu" class="modal">
    <div class="modal-content">
      <a href="#" class="closebtn">X</a>
      <h2>Titre</h2>
      <p>Contenu de la modale sur autre_page</p>
    </div>
  </div>

</body>

</html>

Edit : pour simplifier le post, j'ai intégré le CSS de la modale dans le HTML

Réponse 3 / 3
trigo-no Messages postés 5 Date d'inscription Statut Membre Dernière intervention

Merci beaucoup Diablo pour ta réponse.
0

Probleme ouverture fenetre modal depuis une autre page

3 réponses

Discussions similaires

Newsletters