Show different popups from list.

Question

I'm having an issue displaying popups with multiple items on the page. Essentially it is a vertical "list" of items down the page. So far I have two. When I click the first one, the first set of information displays correctly, but when I click the second item, it displays the first set of information on the popup. Any help is appreciated, thanks!

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

And here is the 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);
}

and here is the 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;
});

});

first a tag is wrapped with p tag but not to second a tag. wrap it up! — Bhojendra Rauniyar, Feb 19 '14 at 02:55

score 1 · Accepted Answer · answered Feb 19 '14 at 03:00

1

You need to wrap your second anchor inside a <p> tag, then you can change:

$('.overlay-bg').show();

to:

$(this).parent().next().show();

This will help you to target the .overlay-bg according to your clicked .show-popup anchor

Fiddle Demo

answered Feb 19 '14 at 03:00

Felix

37,443
7
40
55

Thanks so much. The
anchor got deleted when I formatted the code to display on here, but the script change worked perfectly. Could you explain why exactly it worked? I'm not that fluent with JS.
– user1974107 Feb 19 '14 at 03:05
It's because when you used `$('.overlay-bg').show();`. It will hide all `.overlay-bg` inside your DOM, not only the overlay that is trigger by its previous button. So when you use `$(this).parent().next().show();`, it will helps you to target only the overlay that is the next element of your clicked button – Felix Feb 19 '14 at 03:12

score 1 · Answer 2 · edited May 23 '17 at 12:03

LIVE DEMO

Put inside the anchors href the ID of the desired popup content you want to see:

CSS:

.overlay-content {
  display:none; /* NOTE THIS */

HTML: _{(USE ONLY ONE POPUP ELEMENT BUT MORE CONTENT ELEMENTS!)}

<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();
  });

});

doing this way, you could even have inside the popup only one CLOSE button, but I'll leave it to you,
I hope you get the general idea...

Also: take a look at this question: event.preventDefault() vs. return false

score 0 · Answer 3 · answered Feb 19 '14 at 03:04

add a id to link, div and button what you want show.

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

and use $(this) and the 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>

Show different popups from list.

3 Answers3