Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ JavaScript _ Wiele Okien PopUp Po Kliknięciu w przyciski

Napisany przez: slawek1969 30.01.2023, 11:54:57

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>


<link rel="stylesheet" href="assets/css/popup.css" media="all"/>

</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">


<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>

</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>


<br><br>


<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>

</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>


<br><br>


<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>

</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>


</div>
</div>
</div>
</div>
</div>
</div>

</section>


</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;
}
}

Napisany przez: com 30.01.2023, 18:35:41

po pierwsze wklej ten kod w odpowiednie tagi, po drugie
const popup = document.getElementById("popup2"); itp powinny być w tym momencie unikalne

Napisany przez: slawek1969 31.01.2023, 08:47:18

Ok, zmieniłem te ID ale nadal nie działa. Możesz podesłać poprawiony działający kod. Dzięki