Probleme ouverture fenetre modal depuis une autre page
Résolutrigo-no Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
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
- Probleme ouverture fenetre modal depuis une autre page
- Supprimer une page word - Guide
- Page d'ouverture google - Guide
- Imprimer tableau excel sur une page - Guide
- Fenetre windows - Guide
- Ouvrir une fenêtre de navigation privée - Guide
3 réponses
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>
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.
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
