我在显示页面上包含多个元素的弹出窗口时遇到问题。本质上,它是页面下方元素的垂直“列表”。到目前为止我有两个。当我点击第一项时,第一组信息正确显示,但当我点击第二项时,它在弹出窗口中显示第一组信息。任何帮助表示赞赏,谢谢!
<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>
这是 CSS
.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);
}
这是JS
$(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;
});
});
最佳答案
您需要将第二个 anchor 包裹在 <p>
中标签,然后你可以改变:
$('.overlay-bg').show();
到:
$(this).parent().next().show();
这将帮助您定位 .overlay-bg
根据你点击的.show-popup
anchor
关于javascript - 从列表中显示不同的弹出窗口。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21870064/