View original (French)

Probleme ouverture fenetre modal depuis une autre page

Solved
trigo-no Posted messages 3 Registration date   Status Membre Last intervention   -  
trigo-no Posted messages 3 Registration date   Status Membre Last 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

3 answers

Answer 1 / 3
Diablo76 Posted messages 337 Registration date   Status Member Last intervention   139
 

Hello,

You are missing a quotation mark:

<a href="../ma_page/#mon_id>to my modal</a>
<a href="../ma_page/#mon_id">to my modal</a>
0
Answer 2 / 3
trigo-no Posted messages 3 Registration date   Status Member Last intervention  
 

Oops. Sorry, it's a typo when I posted the post.

On my page, I have the quotation marks and it doesn't work.
0
Diablo76 Posted messages 337 Registration date   Status Member Last intervention   139
 

You need to recreate the HTML structure of your modal on autre_page like this:

File ma_page :

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Page</title> <style> body { font-family: Arial, sans-serif; } /* HIDDEN MODAL BY DEFAULT */ .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); justify-content: center; align-items: center; } /* When the id is targeted */ .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>My Page</h1> <div><a href="#id_menu">Open the modal</a></div> <div><a href="autre_page.html#id_menu">Open the modal on autre_page</a></div> <div id="id_menu" class="modal"> <div class="modal-content"> <a href="#" class="closebtn">X</a> <h2>Title</h2> <p>Content of the modal window</p> </div> </div> </body> </html>

File autre_page : 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Another Page</title> <style> body { font-family: Arial, sans-serif; } /* Hidden modal */ .modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; } /* When the anchor is targeted */ .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>Another Page</h1> <a href="#id_menu">Open the modal</a> <div id="id_menu" class="modal"> <div class="modal-content"> <a href="#" class="closebtn">X</a> <h2>Title</h2> <p>Content of the modal on autre_page</p> </div> </div> </body> </html>

Edit: to simplify the post, I integrated the modal CSS into the HTML

1
Answer 3 / 3
trigo-no Posted messages 3 Registration date   Status Member Last intervention  
 

Thank you very much Diablo for your reply.
0