The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
pandy
post Jun 10 2020, 02:10 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(steigerdaniel @ Jun 9 2020, 10:24 PM) *

Link to the website: dev.hirzelgu.ch


I find no such page there. Can you post the full URL?

Nevertheless, the sample you posted works for me. Only the right description shows when an image is clicked.


The first image doesn't load in some browsers though. That's because the URL to it contains a carachter that's illegal in URLs. The ü needs to be URL encoded. %C3%BC is the code for a unicode ü.

CODE
http://dev.hirzelgu.ch/wp-content/uploads/2020/05/R%C3%BCfenacht-Ruedi-01-1024x1024.jpg


Typically we recommend that the disk files are renamed to avoid messy URLs. Like spaces that aren't allowed in URLs can be replaced with underscore, my dog.jpg -> my_dog.jpg. But since this is a name, maybe you'd rather keep it as it is than rename the guy to Rufenacht.

You can read a little about URL encoding and why it's used here.
http://www.blooberry.com/indexdot/html/top...urlencoding.htm

Note that that page is old though and it doesn't cover the Unicode problem. The converter will convert your ü to %FC, which is an ISO -latin ü.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 28th March 2024 - 10:46 AM