Trisha Trisha - 23 days ago 6
jQuery Question

jquery popup window only pulling last popup div

I am trying to have a link open a popup window that holds some inline HTML and an image when the user clicks on the link.

I've gotten it to work so that each link opens the popup window, but it will not show the right content - It keeps pulling the last hidden div instead of the one for the link that is clicked on.



;(function($){
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#popup,#popup2,#popup3,#popup4').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#popup,#popup2,#popup3,#popup4'));
return false;
});
});

$.prototype.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
})(jQuery);

@media screen and (max-width:980px) {
.hide {
font-weight: bold;
color: #0f2c6a;
display: block !important;
}
}
.hide {
display: none;
}

a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}

.messagepop {
box-shadow: 0 0 100px 450px rgba(0,0,0,0.2);
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 15px;
text-align:left;
min-width:500px;
max-width: 1200px;
min-height: 00px;
max-height: 820px;
z-index:99999;
padding: 25px 25px 25px;
margin: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

@media screen and (max-width:480px) {
.messagepop {
min-width: 300px !important;
max-width: 330px !important;
min-height: 300px !important;
max-height: 330px !important;
}
.pop-right {
font-size: 16px;
}
}
@media screen and (max-width:980px) {
.messagepop {
min-width: 600px;
max-width: 650px;
min-height: 400px;
max-height: 640px;
}
.pop-right {
font-size: 20px;
}
}
@media screen and (max-width: 768px) {
.messagepop {
min-height: 500px;
max-height: 550px;
min-width:335px;
max-width:385px;
}
.pop-right {
font-size: 18px;
}
}

.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}

#close {
position: absolute;
top: -10px;
right: -10px;
background: #000;
border-radius: 40px;
border: 1px solid #fff;
width: 25px;
height: 25px;
}
#close a {
color: #fff;
font-size: 15px;
line-height: 20px;
text-decoration: none;
text-align: center;
width: 25px;
height: 25px;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.pop-left {
float: left;
width: 50%;
}

.pop-right {
float: right;
width: 50%;
padding-left: 20px;
font-size: 20px;
line-height: 1.7em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 1</div>
<div class="pop-right">Right 1</div>
</div>
<a id="popup" href="#popup">View Details</a>

<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 2</div>
<div class="pop-right">Right 2</div>
</div>
<a id="popup2" href="#popup2">View Details</a>

<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 3</div>
<div class="pop-right">Right 3</div>
</div>
<a id="popup3" href="#popup3">View Details</a>

<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 4</div>
<div class="pop-right">Right 4</div>
</div>
<a id="popup4" href="#popup4">View Details</a>





As you can see it's only pulling the last 'messagepop pop' div.

Answer

you are trying to select and fire events on your elements using the class selector. The class selector will give you the array like object for all the matching elements for the class.

What you need to do is to find the exact element which is clicked, you have $(this) jquery object in your click events which tell you which exact element is clicked by user.

Now you will have to get the other elements by using this exact element $(this).

Make the changes as below in your code.

  (function($){
    function deselect(e) {
         e.prev().slideFadeToggle(function() {
        e.removeClass('selected');
      }); 
    }
    $(function() {
      $('#popup,#popup2,#popup3,#popup4').on('click', function() {
        if($(this).hasClass('selected')) {
          deselect($(this));               
        } else {
          $(this).addClass('selected');
          $(this).prev().slideFadeToggle();
        }
        return false;
      });
      $('.close').on('click', function() {
    var link = $(this).parent().parent().next().attr("id");
        deselect($("#"+link));
        return false;
      });
    });

    $.prototype.slideFadeToggle = function(easing, callback) {
      return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
    };
})(jQuery);

Working example : http://jsfiddle.net/SRw67/3042/