+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Popup öffnet sich nicht wenn der Button einen Link enthält (/showthread.php?tid=2637)
Popup öffnet sich nicht wenn der Button einen Link enthält - Ghost42 - 31.10.2023
Hallo zusammen
Ich bin der Ghost42 und habe leider nur begrenzt Ahnung von Java Script. Allerdings muss ich ein Projekt abschliessen und habe soweit alles hinbekommen. Ausser etwas das vorher funktioniert hat und nun eben nicht mehr.
Deshalb benötige ich Hilfe.
Mein Code sieht wie folgt aus:
<script>
$(function () {
var sym = '?';
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/windows phone/i.test(userAgent)) {
var sym = '?';
}
if (/android/i.test(userAgent)) {
var sym = '?';
}
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
var sym = '&';
}
var smscodes = [[100, 'GB', 'CH/LI', 30, 20, '100GB', 'Text', ' '],
[3000, 'Minuten', 'CH/LI', 30, 10, 'EUA3000', 'Text', 'Text2'],
[1, 'GB', 'EU/Zone3', 365, 10, 'EU1GB', 'Text', ' '],
[5, 'GB', 'EU/Zone3', 365, 30, 'EU5GB', 'Text', ' '],
[100, 'Minuten', 'EU/Zone3', 365, 10, 'EU100', 'Text', 'Text2'],
[100, 'MB', 'Zone4', 365, 10, 'W100MB', 'Text', ' '], '],
[1, 'GB', 'Zone4', 365, 40, 'W1GB', 'Text', ' '],
[100, 'Minuten', 'Zone4', 365, 20, 'W100MB', 'Text', 'Text2'],
];
//Container Element abrufen
var options = "";
// Schleife zur Generierung der HTML-Elemente
for (let i = 0; i < smscodes.length; i++) {
var code = smscodes[i];
options=document.getElementsByClassName(code[5]); //100GB, EUA3000, EU1GB ..
// HTML-Struktur und Inhalt erstellen
var sidecol = '<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-2 col-sm-0 col-xs-0"></div>';
var center_col = '<div class="col optionbg">';
var center_title = '<div class="row"><div class="col"><h3 style="font-size: 1.2rem;">' + code[6] + '</h3></div></div>';
var center_subtxt = '<div class="row"><div class="col">' + code[7] + '<br><span style="font-size:12px;">Gültigkeitsdauer ab Kauf: ' + code[3] + ' Tage</span></div></div>';
var center_btn = '<div class="row"><div class="col"><a title="Titel: ' + code[5] + '" href="sms:12345' + sym + 'body=' + code[5] + '" class="btn btn-primary popupbtn" style="width:100%; padding-top: 5px;"' + i + '">Aktivieren um ' + code[4] + '.- </a></div></div>';
var center_col_end = '</div><div class="col-xxl-2 col-xl-2 col-lg-2 col-md-2 col-sm-0 col-xs-0" ></div>';
var dataToDisplay = sidecol + center_col + center_title + center_subtxt + center_btn + center_col_end + sidecol;
// Ein neues div-Element erstellen
var optionhtml = document.createElement('div');
// Klasse je nach code[2] setzen
switch (code[2]) {
case 'CH/LI':
optionhtml.setAttribute("class", "col-row onehidden");
break;
case 'EU/Zone3':
optionhtml.setAttribute("class", "col-row twohidden");
break;
case 'Zone4':
optionhtml.setAttribute("class", "col-row threehidden");
break;
default:
optionhtml.setAttribute("class", "col-row");
}
// HTML in das neue Element einfügen
optionhtml.innerHTML = dataToDisplay;
// Das Element dem Container hinzufügen
for (let j = 0; j < options.length; j++) {
options[j].appendChild(optionhtml);
}
}
});
</script>
Dann den Code für das öffnen des Popups:
<script>
document.addEventListener('DOMContentLoaded', function () {
// Alle Buttons mit der Klasse 'popupbtn' abfragen
const popupBtns = document.querySelectorAll('.popupbtn');
const popupContainer = document.querySelector('.popup-container');
const closeBtn = document.querySelector('.closebtn');
// Schleife durch alle Buttons, um den Klick-Event hinzuzufügen
popupBtns.forEach(function (btn) {
btn.addEventListener('click', function () {
popupContainer.style.display = 'block';
});
});
closeBtn.addEventListener('click', function () {
popupContainer.style.display = 'none';
});
});
</script>
Und dann der code mit den Inhalten von oben:
<div class="container-fluid">
<div class="row"></div>
<div class="EUA3000"></div>
<div class="100GB"></div>
<div class="EU100"></div>
<div class="EU1GB"></div>
<div class="EU5GB"></div>
<div class="W100"></div>
<div class="W100MB"></div>
<div class="W1GB"></div>
</div>
Wenn ich dem Button die verlinkung entferne, funktioniert das popup fast. Zumindest fährt er nach ganz oben mit der Ansicht. Was er normalerweise beim öffnen eines solchen Popups auch getan hat. Aber wie bewerkstellige ich es, dass die verlinkung bleibt?
Danke schon mal vorab für die Hilfe
LG Ghost42