Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Wiele Okien PopUp Po Kliknięciu w przyciski
slawek1969
post 30.01.2023, 11:54:57
Post #1





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 16.07.2007

Ostrzeżenie: (0%)
-----


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;
}
}
Go to the top of the page
+Quote Post
com
post 30.01.2023, 18:35:41
Post #2





Grupa: Zarejestrowani
Postów: 3 032
Pomógł: 366
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----


po pierwsze wklej ten kod w odpowiednie tagi, po drugie
const popup = document.getElementById("popup2"); itp powinny być w tym momencie unikalne smile.gif
Go to the top of the page
+Quote Post
slawek1969
post 31.01.2023, 08:47:18
Post #3





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 16.07.2007

Ostrzeżenie: (0%)
-----


Ok, zmieniłem te ID ale nadal nie działa. Możesz podesłać poprawiony działający kod. Dzięki smile.gif
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 19:17