Cześć!
Mam taki prosty skrypt wyskakującego okna PopUp po kliknięciu w przycisk. I to działa OK. Ale ja potrzebuję użyć tego wiele razy na jednej stronie i jak powielam ten kod to pierwszy przycisk działa ale pozostałe nie. Zmieniłem id popup na inną nazwę ale też nie działa. Proszę pomóżcie jak to zrobić żeby wiele przycisków wyświetlało oddzielne okna popup.
Poniżej kod strony z js:
<!DOCTYPE HTML>
<html lang="pl">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Test PopUp</title>
<head>
<!-- Styl PopUp-->
<link rel="stylesheet" href="assets/css/popup.css" media="all"/>
<!--Koniec Styl PopUp-->
</head>
<body>
<center>
<section>
<div id="lgx-pomoc" class="lgx-travelinfo">
<div class="lgx-inner">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="lgx-heading">
<h2 class="heading">Test PopUp</h2>
<h3 class="subheading">Jak Zrobić Aby Było Można Dodawać kolejne Przyciski Dla PopUp</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="lgx-travelinfo-content">
<div class="lgx-travelinfo-single">
<!--PopUp 1-->
<button id="open-button">Otwórz Popup 1</button></center>
<div id="popup" style="display: none; width: 90%;">
<p>Treść Okna</p>
<br><br>
<button id="close-button">Zamknij</button>
<!-- Your popup content goes here -->
</div>
<script>
// Get the button and popup elements
const openButton = document.getElementById("open-button");
const popup = document.getElementById("popup");
const closeButton = document.getElementById("close-button");
// Add an event listener to the button to open the popup when clicked
openButton.addEventListener("click", () => {
popup.style.display = "block";
});
// Add an event listener to the close button to close the popup when clicked
closeButton.addEventListener("click", () => {
popup.style.display = "none";
});
</script>
<!--Koniec PopUp 1-->
<br><br>
<!--PopUp 2-->
<center><button id="open-button">Otwórz Popup 2</button></center>
<div id="popup2" style="display: none; width: 90%;">
<p>Treść Okna</p>
<br><br>
<button id="close-button">Zamknij</button>
<!-- Your popup content goes here -->
</div>
<script>
// Get the button and popup elements
const openButton = document.getElementById("open-button");
const popup = document.getElementById("popup2");
const closeButton = document.getElementById("close-button");
// Add an event listener to the button to open the popup when clicked
openButton.addEventListener("click", () => {
popup.style.display = "block";
});
// Add an event listener to the close button to close the popup when clicked
closeButton.addEventListener("click", () => {
popup.style.display = "none";
});
</script>
<!--Koniec PopUp 2-->
<br><br>
<!--PopUp 3-->
<center><button id="open-button">Otwórz Popup 3</button></center>
<div id="popup3" style="display: none; width: 90%;">
<p>Treść Okna</p>
<br><br>
<button id="close-button">Zamknij</button>
<!-- Your popup content goes here -->
</div>
<script>
// Get the button and popup elements
const openButton = document.getElementById("open-button");
const popup = document.getElementById("popup3");
const closeButton = document.getElementById("close-button");
// Add an event listener to the button to open the popup when clicked
openButton.addEventListener("click", () => {
popup.style.display = "block";
});
// Add an event listener to the close button to close the popup when clicked
closeButton.addEventListener("click", () => {
popup.style.display = "none";
});
</script>
<!--Koniec PopUp 3-->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--POMOC END-->
</body>
</html>
A Tutaj style css:
#open-button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
#open-button3 {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
#open-button:hover {
background-color: darkblue;
cursor: pointer;
}
#popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px #000000;
animation: popup-animation 0.5s ease-in-out;
}
#close-button {
position: absolute;
top: 10px;
right: 10px;
background-color: red;
color: white;
padding: 5px 10px;
border-radius: 5px;
}
#close-button:hover {
background-color: darkred;
cursor: pointer;
}
@keyframes popup-animation {
from {
opacity: 0;
transform: scale(0.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
#popup {
overflow: auto;
max-height: 80%;
}
#popup {
z-index: 9999; /* or any high value */
/* other existing CSS */
}
#popup p {
text-shadow: 0 0 10px neonblue;
animation: neon-animation 1s ease-in-out infinite;
}
@keyframes neon-animation {
from {
text-shadow: 0 0 10px neonblue;
}
to {
text-shadow: 0 0 20px neonblue;
}
}
Pełna wersja: Wiele Okien PopUp Po Kliknięciu w przyciski
po pierwsze wklej ten kod w odpowiednie tagi, po drugie
const popup = document.getElementById("popup2"); itp powinny być w tym momencie unikalne
const popup = document.getElementById("popup2"); itp powinny być w tym momencie unikalne
Ok, zmieniłem te ID ale nadal nie działa. Możesz podesłać poprawiony działający kod. Dzięki
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.