Currently, I am encountering an issue with the magnificPopup. Whenever I try to trigger the popup using the class 'popup-with-zoom-anim', it doesn't seem to work as expected. Has anyone else faced a similar problem before?
<body>
<span id="filtro"></span>
<script>
function makeTable(data){
var tbl_body = "";
var tbl_row = "";
$.each(data, function(index, value) {
tbl_row += "<a id ='myBtn' class='popup-with-zoom-anim' href='#small-dialog1'>";
tbl_row += "<div class='portfolio' data-cat='logo'>";
tbl_row += "<div class='portfolio-wrapper'>";
tbl_row += "<img src='";
tbl_row += "' alt='Image 2' style='width:260px;'/>";
tbl_row += "<div class='label'>";
tbl_row += "<div class='label-text'>";
tbl_row += "<p class='text-title'></p>";
tbl_row += "<span class='text-category'></span>";
tbl_row += "</div>";
tbl_row += "<div class='label-bg'></div>";
tbl_row += "</div>";
tbl_row += "</div>";
tbl_row += "</div>";
tbl_row += "</a>";
})
return tbl_row;
}
$('#filtro').html();
</script>
<link href="web/css/magnific-popup.css" rel="stylesheet" type="text/css">
<script src="web/js/jquery.magnific-popup.js" type="text/javascript"></script>
<script>
$( window ).load(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
</script>