У меня проблема с отображением всплывающих окон с несколькими элементами на странице. По сути, это вертикальный "список" элементов вниз по странице. Пока у меня два. Когда я нажимаю первый, первый набор информации отображается правильно, но когда я нажимаю на второй элемент, он отображает первый набор информации во всплывающем окне. Любая помощь приветствуется, спасибо!
<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;
});
});
Вам нужно обернуть второй якорь внутри <p>
, после чего вы можете изменить:
$('.overlay-bg').show();
чтобы:
$(this).parent().next().show();
Это поможет вам настроить таргетинг на .overlay-bg
соответствии с вашим .show-popup
anchor
$('.overlay-bg').show();
, Он будет скрывать все .overlay-bg
внутри вашей DOM, а не только оверлей, который запускается его предыдущей кнопкой. Поэтому, когда вы используете $(this).parent().next().show();
, это поможет вам нацелить только наложение, которое является следующим элементом вашей нажатой кнопки
Поместите внутри якорей href
идентификатор нужного всплывающего содержимого, которое вы хотите увидеть:
CSS:
.overlay-content {
display:none; /* NOTE THIS */
HTML: (ИСПОЛЬЗУЙТЕ ТОЛЬКО ОДИН ЭЛЕМЕНТ ПОПУЛЯЦИИ, НО БОЛЬШЕ ЭЛЕМЕНТОВ КОНТЕНТА!)
<a class="show-popup" href="#cont1">Manual Therapy</a>
<a class="show-popup" href="#cont2">LIST ITEM 2</a>
<div class="overlay-bg">
<div id="cont1" class="overlay-content">
<h2>Manual Therapy</h2>
<p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
<button class="close-btn">Close</button>
</div>
<div id="cont2" 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>
JQ:
$(function(){
$('.show-popup').click(function(event){
event.preventDefault();
$('.overlay-bg,'+ $(this).attr('href')).show(); // Show overlay, but also
}); // the popup ID content
// taken from the anchor HREF
$('.overlay-bg, .close-btn').click(function(){
$('.overlay-bg, .overlay-content').hide();
});
$('.overlay-content').click(function(event){
event.stopPropagation();
});
});
делая это, вы можете даже иметь внутри всплывающего окна только одну кнопку CLOSE
, но я оставлю это вам,
Надеюсь, вы получите общую идею...
Также: взгляните на этот вопрос: event.preventDefault() vs. return false
добавьте id для ссылки, div и кнопку, которую вы хотите показать.
<a class="show-popup" href="#" id="1">Manual Therapy</a></p>
<div class="overlay-bg" id="div_1">
<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="#" id="2">LIST ITEM 2</a>
<div class="overlay-bg" id="div_2">
<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>
и используйте $ (this) и id.
<script>
$(document).ready(function(){
// show popup when you click on the link
$('.show-popup').click(function(event){
var id = $(this).attr("id");
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
$('#div_'+id).show(); //display your popup
});
// hide popup when user clicks on close button
$('.close-btn').click(function(){
var id = $(this).attr("id");
$('#div_'+id).hide(); // hide the overlay
});
// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function(){
$(this).hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
return false;
});
});
</script>