Pop Up gone wrong, More than one Pop Up opening when I click the link |
Pop Up gone wrong, More than one Pop Up opening when I click the link |
steigerdaniel |
Jun 9 2020, 03:24 PM
Post
#1
|
Group: Members Posts: 1 Joined: 9-June 20 Member No.: 27,390 |
Hi guys,
So I'm setting up a website and I would like that visitors get a pop up with the information about an employee, once they click on the emplyoee picture. This is the code: HTML: <div class="Mitarbeiter"> <a href="#popup1"><div class="Mitarbeiter-single"> <img src="http://dev.hirzelgu.ch/wp-content/uploads/2020/05/Rüfenacht-Ruedi-01-1024x1024.jpg"> <div class="bannername"> <span>Ruedi Rüfenacht</span> Geschäftsführer <br /> Projektleiter </div> </div></a> <div id="popup1" class="overlay1"> <div class="popup1"> <h2>Ruedi Rüfenacht</h2> <a class="close" href="#">×</a> <table class="arbeiterinfo"> <tr> <td>Tel Direkt:</td> <td>044 931 00 41</td> </tr> <tr> <td>Email:</td> <td>ruefenacht@hirzelgu.ch</td> </tr> <tr> <td>Ausbildung</td> <td>- Hochbauzeichner EFZ<br /> - Eidg. dipl. Bauleiter Hochbauzeichner <br /> - Architekt HTL <br /> - Wirtschaftsingenieur </td> </tr> </table> </div> </div> </div> <div class="Mitarbeiter"> <a href="#popup2"><div class="Mitarbeiter-single"> <img src="http://dev.hirzelgu.ch/wp-content/uploads/2020/05/Hitz-Christoph-01.jpg"> <div class="bannername"> <span>Christoph Hitz</span> Stv. Geschäftsführer <br /> Mitglied der GL </div> </div></a> <div id="popup2" class="overlay2"> <div class="popup2"> <h2>Christoph Hitz</h2> <a class="close" href="#Unternehmen">×</a> <table class="arbeiterinfo"> <tr> <td>Tel Direkt:</td> <td>044 931 00 42</td> </tr> <tr> <td>Email:</td> <td>hitz@hirzelgu.ch</td> </tr> <tr> <td>Ausbildung</td> <td>- Hochbauzeichner EFZ<br /> - Eidg. dipl. Bauleiter Hochbauzeichner </td> </tr> </table> </div> </div> </div> and here's the css .overlay1, .overlay2, .overlay3, .overlay4, .overlay5, .overlay6, .overlay7, .overlay8 { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay1:target, .overlay2:target, .overlay3:target, .overlay4:target, .overlay5:target, .overlay6:target, .overlay7:target, .overlay8:target { visibility: visible; opacity: 1; } .popup1, .popup2, .popup3, .popup4, .popup5, .popup6, .popup7, .popup8 { margin: 0 auto; padding: 20px; top: 30%; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; } .popup1 h2, .popup2 h2, .popup3 h2, .popup4 h2, .popup5 h2, .popup6 h2, .popup7 h2, .popup8 h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup1 .close, .popup2 .close, .popup3 .close, .popup4 .close, .popup5 .close, .popup6 .close, .popup7 .close, .popup8 .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #06D85F; } For some reason, when I click the first one, all other pictures also show up as pop up and I have spent already way too much time and I really don't know any further. Would appreciate any help. Link to the website: dev.hirzelgu.ch |
Lo-Fi Version | Time is now: 29th March 2024 - 01:26 AM |