无法使用 Magnific 弹出窗口和 PHP 设置我的 DIV 样式答案

【问题标题】：Can't style my DIV with Magnific popup and PHP无法使用 Magnific 弹出窗口和 PHP 设置我的 DIV 样式
【发布时间】：2015-06-05 10:37:32
【问题描述】：

我正在使用 PHP/SQL 来显示我的元素。我添加了插件Magnific Popup 以在用户单击它时为元素添加灯箱。

但是我无法设置弹出元素的样式，因为我使用#ID（应该是设置弹出样式的那个）来选择点击的元素。

还有其他方法可以显示我的元素以便我可以设置弹出窗口的样式吗？

这是我的代码：

PHP/HTML

<?php while ($row = mysql_fetch_array($query)): ?>

  <div class="grid-item">

   <a class="popup-with-zoom-anim" href="#small-dialog-<?php echo $row['leakID']?>" >
   <img src="<?php echo $row['leakURL']?>">
   </a>

 </div>

 // The hidden POP-UP
 <div id="small-dialog-<?php echo $row['leakID']?>" class="mfp-hide">
   <img src="<?php echo $row['leakURL']?>">
</div>

<?php endwhile?>

JQUERY

$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',

fixedContentPos: false,
fixedBgPos: true,

overflowY: 'auto',

closeBtnInside: true,
preloader: false,

midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-slide-bottom'
});

【问题讨论】：

标签： javascript php jquery css magnific-popup

【解决方案1】：

您可以使用 mfp 类来设置弹出窗口内容的样式......

.mfp-container div[id^=small-dialog-] {
    style here...
}

【讨论】：

我试过了，但它不起作用。在 html 中的哪里添加 .mfp-container？
.mfp-container 是包装内容的 magnific popup 使用的类。将以上内容添加到您的样式表或页面上，弹出窗口位于<style></style> 标签之间。