我在页面上显示包含多个项目的弹出窗口时遇到问题。本质上，它是页面下方项目的垂直“列表”。到目前为止我有两个。当我单击第一个项目时，第一组信息会正确显示，但是当我单击第二个项目时，它会在弹出窗口中显示第一组信息。任何帮助表示赞赏，谢谢！
$(document).ready(function() {
// show popup when you click on the link
$('.show-popup').click(function(event) {
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
$('.overlay-bg').show(); //display your popup
});
// hide popup when user clicks on close button
$('.close-btn').click(function() {
$('.overlay-bg').hide(); // hide the overlay
});
// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function() {
$('.overlay-bg').hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function() {
return false;
});
});
.overlay-bg {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
cursor: pointer;
background: #000;
/* fallback */
background: rgba(0, 0, 0, 0.75);
}
.overlay-content {
background: #fff;
padding: 1%;
width: 700px;
height: 400px;
overflow: auto;
position: relative;
top: 15%;
left: 30%;
margin: 0 0 0 -10%;
/* add negative left margin for half the width to center the div */
cursor: default;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
}
<p> <a class="show-popup" href="#">Manual Therapy</a></p>
<div class="overlay-bg">
<div class="overlay-content">
<h2>Manual Therapy</h2>
<p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
<button class="close-btn">Close</button>
</div>
</div>
<a class="show-popup" href="#">LIST ITEM 2</a>
<div class="overlay-bg">
<div class="overlay-content">
<h2>Low Level LASER Therapy</h2>
<p>SECOND SET OF INFORMATION DISPLAYED HERE</p>
<button class="close-btn">Close</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- 不要使用
<a> anchors如果你不导航。如果你需要buttons - use <button>反而。
- 存储弹出 ID 以在任何按钮内打开
data-popup属性
首先是 JavaScript 解决方案，然后是 jQuery 实现供参考：
// Toggle popup on buttons click:
document.querySelectorAll("[data-popup]").forEach(elBtn => {
elBtn.addEventListener("click", () => {
const elPopup = document.querySelector(elBtn.dataset.popup); // Pass the ID from data-popup attribute
elPopup.classList.toggle("is-active");
});
});
// Close popup on "backdrop" click:
document.querySelectorAll(".popup").forEach(elPopup => {
elPopup.addEventListener("click", (evt) => {
if (evt.target.closest(".popup-content")) return; // Clicked on popup content. Do nothing
elPopup.classList.toggle("is-active");
});
});
* {
margin: 0;
box-sizing: border-box;
}
.popup {
display: flex;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-color: #0004;
padding: 2rem;
transition: opacity 0.4s;
opacity: 0;
pointer-events: none;
}
.popup.is-active {
opacity: 1;
pointer-events: auto;
}
.popup-content {
margin: auto;
background: white;
border-radius: 4px;
box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.3);
padding: 1rem;
max-width: 30rem;
overflow: auto;
max-height: 50vh;
}
<button type="button" data-popup="#popup-one">Open popup 1</button>
<button type="button" data-popup="#popup-two">Open popup 2</button>
<div class="popup" id="popup-one">
<div class="popup-content">
<button type="button" data-popup="#popup-one">Close</button>
<h2>Popup one</h2>
<p>Lorem one ipsum dolor sit amet, consectetur adipisicing elit. Maiores corporis nam earum qui exercitationem sapiente accusantium quas.</p>
</div>
</div>
<div class="popup" id="popup-two">
<div class="popup-content">
<h2>Popup two</h2>
<button type="button" data-popup="#popup-two">Close</button>
<p>Lorem two ipsum dolor sit amet, consectetur adipisicing elit. Quisquam voluptate aut magnam quibusdam sit, molestiae, numquam beatae totam.</p>
</div>
</div>
jQuery 实现：
jQuery($ => { // DOM ready and $ alias in scope
// Toggle popup on buttons click:
$("[data-popup]").on("click", function() {
const $popup = $(this.dataset.popup); // Pass the ID from data-popup attribute
$popup.toggleClass("is-active");
});
// Close popup on "backdrop" click:
$(".popup").on("click", function(evt) {
if (evt.target === this) {
$(this).toggleClass("is-active");
}
});
});
* {
margin: 0;
box-sizing: border-box;
}
.popup {
display: flex;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-color: #0004;
padding: 2rem;
transition: opacity 0.4s;
opacity: 0;
pointer-events: none;
}
.popup.is-active {
opacity: 1;
pointer-events: auto;
}
.popup-content {
margin: auto;
background: white;
border-radius: 4px;
box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.3);
padding: 1rem;
max-width: 30rem;
overflow: auto;
max-height: 50vh;
}
<button type="button" data-popup="#popup-one">Open popup 1</button>
<button type="button" data-popup="#popup-two">Open popup 2</button>
<div class="popup" id="popup-one">
<div class="popup-content">
<button type="button" data-popup="#popup-one">Close</button>
<h2>Popup one</h2>
<p>Lorem one ipsum dolor sit amet, consectetur adipisicing elit. Maiores corporis nam earum qui exercitationem sapiente accusantium quas.</p>
</div>
</div>
<div class="popup" id="popup-two">
<div class="popup-content">
<h2>Popup two</h2>
<button type="button" data-popup="#popup-two">Close</button>
<p>Lorem two ipsum dolor sit amet, consectetur adipisicing elit. Quisquam voluptate aut magnam quibusdam sit, molestiae, numquam beatae totam.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
