View original (French)

Problem opening modal window from another page

Solved
trigo-no Posted messages 5 Registration date   Status Member Last intervention   -  
trigo-no Posted messages 5 Registration date   Status Member Last intervention   -

Hello

I want to open a modal window from a different page than the one where it is hosted.

So I make a link like this

in my page I have

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

my modal opens correctly if I open it from my_page

but when I want to open it from other_page

<a href="../my_page/#mon_id">to my modal</a>

My text appears on the page but not the modal window.

What is the problem?

Thank you for your attention

3 answers

  1.
    Diablo76 Posted messages 344 Registration date   Status Member Last intervention   140
     

    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
  2. trigo-no Posted messages 5 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
    1. Diablo76 Posted messages 344 Registration date   Status Member Last intervention   140
       

      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
  3. trigo-no Posted messages 5 Registration date   Status Member Last intervention  
     

    Thank you very much Diablo for your reply.

    0