The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Pop Up gone wrong, More than one Pop Up opening when I click the link
steigerdaniel
post 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="#">&times;</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">&times;</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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
steigerdaniel   Pop Up gone wrong   Jun 9 2020, 03:24 PM
pandy   Link to the website: dev.hirzelgu.ch I find no ...   Jun 10 2020, 02:10 AM


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 01:26 AM