HTML
<a class="btn" data-popup-open="popup-1" href="#">More Details</a>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<h2>Unbelievable! Check this Out! (Popup #1)</h2>
<p>Per Serving: 5g Energy: 20kcal Protein: 0.0g Total Fat: 0.0g Saturated Fat: 0.0g Carbohydrates: 0.0g Package Size: 1 x 24 x 350g</p>
<p><a data-popup-close="popup-1" href="#">Close</a></p>
<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>
</div>
<a class="btn" data-popup-open="popup-1" href="#">Quick Inquiry</a>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<h2>This One Won't Disappoint (Popup #1)</h2>
<p>Another set of data that will not disappoint.</p>
<p><a data-popup-close="popup-1" href="#">Close</a></p>
<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>
</div>
CSS:
/* Outer */
.popup {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
}
/* Inner */
.popup-inner {
max-width:700px;
width:90%;
padding:40px;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
background:#fff;
}
/* Close Button */
.popup-close {
width:30px;
height:30px;
padding-top:4px;
display:inline-block;
position:absolute;
top:0px;
right:0px;
transition:ease 0.25s all;
-webkit-transform:translate(50%, -50%);
transform:translate(50%, -50%);
border-radius:1000px;
background:rgba(0,0,0,0.8);
font-family:Arial, Sans-Serif;
font-size:20px;
text-align:center;
line-height:100%;
color:#fff;
}
.popup-close:hover {
-webkit-transform:translate(50%, -50%) rotate(180deg);
transform:translate(50%, -50%) rotate(180deg);
background:rgba(0,0,0,1);
text-decoration:none;
}
jQuery:
$(function() {
//----- OPEN
$('[data-popup-open]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
});
//----- CLOSE
$('[data-popup-close]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});
});
This code functions as expected but seems to have an issue with displaying the content in the second popup. Even after trying different jQuery popup implementations, the data inside the popup remains unchanged when navigating to the next one. How can this be resolved?