Javascript oder CSS Popup mehrfach verwenden

Hallo zusammen,

es ist wohl eine Anfängerfrage, aber vielleicht helft ihr mir trotzdem.

Also: Auf der Suche nach Code für ein Javascript Popup bin ich auf W3 hängen geblieben und habe mir den Code in eine PHP function gebaut. Aufrufen, funktioniert. Als ich die Function ein 2. Mal einabauen wollte hat der Button schlicht nicht reagiert auf Klick. Ich dachte das liegt am Javascript.

Dann haben ich mir ein pures CSS Popup rausgesucht: https://codepen.io/imprakash/pen/GgNMXO

Auch diesen Code habe ich in eine Function gepackt. Funktioniert, ABER wenn ich sie ein 2. Mal aufrufe, weil es anderen Content darstellen soll, zeigt es leider den Inhalt vom 1. Popup. Hat mich nun den ganzen Abend gekostet.

Aufrufen der Function:

$buttonStyle="1";  
$buttonName="Button1";  
$contentToPopup="111111111";  
popupCSS($buttonStyle, $buttonName, $contentToPopup);

$buttonStyle="2";  
$buttonName="Button2";  
$contentToPopup="222222222222";  
popupCSS($buttonStyle, $buttonName, $contentToPopup);

$buttonStyle="3";  
$buttonName="Button3";  
$contentToPopup="3333333333333";  
popupCSS($buttonStyle, $buttonName, $contentToPopup);

Wie gesagt: Es zeigt alle Buttons mit richtigem Title an. Button 1 funktioniert wie es soll. Buttton 2 und 3 haben den richtigen Title ABER zeigen leider den Inhalt von Popup 1 an. (111111111)
Es wäre super, wenn mir jemand n Tipp gibt, was da bloß falsch sein kann. Es muss nicht dieser Code sein. Alles was ich möchte, ist einen Code für einen Wiederverwendbaren Popup.
Danke und Gruß
Jensen

Hier auch noch die Function, ich glaub aber nicht, dass da was falsch ist...

<?php

function popupCSS($buttonStyle, $buttonName, $contentToPopup) {
	
///////// BUTTON STYLE
switch ($buttonStyle) {
	case '1':						break; 
	case '2':						break; 
	case '3':						break; 
	default:						break;
}
?>
<html>
<style>

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .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;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}
</style>

<div class="box"> 
	<a class="button" href="#popup1"><? echo $buttonName; ?></a> 
</div>

<div id="popup1" class="overlay"> 
	<div class="popup"> 
		<a class="close" href="#">&times;</a> 
		<div class="content"> 
			<? echo $contentToPopup; ?>
		</div>
	</div>
</div>


<?

}

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 390132

Url: https://administrator.de/contentid/390132

Ausgedruckt am: 21.11.2024 um 22:11 Uhr

1 Kommentar

Hallo Jens4ever

[..] ich glaub aber nicht, dass da was falsch ist [..]

"Glauben ist nicht wissen""
Ergo: Da IST was falsch ! ;)

Und die Tatsache das da was nicht funktioniert muss auch einen "Fehler" als Quelle haben.

Zu HTML in deiner PHP-Funktion:

Das <html>-Tag darf in einem Dokument nur ein einziges mal vorkommen !
Das </html>-Tag (schließendes HTML-Tag) fehlt
Das der gesamte <body></body> fehlt
Das <style> sollte im <head> des <html> stehen
IDs von Elementen MÜSSEN eindeutig sein / dürfen nicht mehr als 1 mal vergeben werden !

HTML-Grundgerüst (selfHTML)
Mit jedem Aufruf generiert die in dem erzeugten HTML-Dokument immer wieder das CSS. (Und alles Andere - das willst du eigentlich gar nicht !)

Durch deine Überzeugung das dort kein Fehler ist, die Fehler die du machst und dein Fehlen für die Funktionsweise dieses Popups gehe ich davon aus das du überhaupt keine Ahnung hast. Also informiere und belese dich bitte !
Es kann nur funktionieren wenn du es RICHTIG machst, nur weil es funktioniert heisst es nicht das es richtig ist !
Ich kann die Muttern an meinen Autoreifen mit der Hand fest drehen, es funktioniert, ist aber nicht richtig ! (Um nicht zu sagen: Eher ziemlich dämlich)

Nun aber zu dem Hauptproblem das du hast.

	<a class="button" href="#popup1"><? echo $buttonName; ?></a>   
<div id="popup1" class="overlay">   

Mit jeden Aufruf deiner Funktion werden unter anderem diese beiden Elemente erzeugt.

Zeigt der Link immer auf das selbe Ziel(Target) und
Wie eben schon erwähnt, darf eine ID nur einmal vergeben werden.

Du rufst deine Funktion nun Drei mal auf was in etwa folgendes generiert

	<a class="button" href="#popup1"><? echo $buttonName; ?></a>   
<div id="popup1" class="overlay">   
	<a class="button" href="#popup1"><? echo $buttonName; ?></a>   
<div id="popup1" class="overlay">   
	<a class="button" href="#popup1"><? echo $buttonName; ?></a>   
<div id="popup1" class="overlay">   

Wird nun auf den letzten, dritten Link geklickt so lautet das Ziel/Target "#popup1". Dein Browser "sucht" nun nach diesem einmaligem, eindeutigem Identifikator "popup1" den er beim ersten Element findet und dann nicht mehr weiter sucht (ist ja einmalig, kann kein weiteres mal vorkommen).
Du musst also dafür sorgen das anstelle von "popup1" ebenfalls ein variabler Wert eingesetzt wird. popup1 popup2 popup3 popupA popupB popupA aaa bbb CCC Apfel Birne Kirsche slkdfn4 i4n5to, muss nur eindeutig sein und s. "Inhaltstyp" ID (selfHTML)

Lass dir mal von deinem Browser den Seitenquelltext anzeigen ggf. [Strg]+[u]

Ich vordere dich einfach mal auf deine popupCSS-Funktion so abzuändern, das sie lediglich die beiden Elemente div.box und div.overlay erzeugt. (inklusive Inhalt)

~Arano

Frage Entwicklung CSS

Mehr von Jens4ever

2 Laptops stürzen unvermittelt ab: Fehler 2505Jens4ever - 5 Kommentare

Auf Mac: OneDrive benutzt sporadisch anderes 365-KontoJens4ever - 3 Kommentare

Microsoft 365 - Jegliche Anmeldung von ungemanagtem Gerät untersagenJens4ever - 2 Kommentare

Per SMTP im TYPO3 Mails über Microsoft 365 sendenJens4ever - 4 Kommentare

Heiß diskutiert