为 Magnific 弹出窗口设置模态大小

Question

使用开箱即用的 css、js 和 html，我对 Magnific Popup 的工作方式感到非常满意。模态框的初始大小（大约 900 X 500 像素）在全屏时很好，但在缩小的屏幕上，这个插件的响应行为使模态框高度降低太多，迫使访问者像狄更斯一样滚动。

我想保留所有设置，除了我想在屏幕宽度小于 600 像素时有一个更高的弹出窗口。

我已经尝试了 jQuery magnific-popup : open 2 popup iframe with differents width/height 中的建议，但是将标记添加到我的初始化 js 只会破坏脚本。

我对 javascript 知之甚少，所以非常感谢任何建议。

Answer 1

您可以在 CSS 中使用媒体查询执行此操作。 (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)

@media screen and (max-width: 600px) {
   .mfp-content {
     height: 600px; // or whatever
   }
}

我不是 100% 确定您要编辑哪个 mfp class，但如果您可以尝试一下并找出答案。我建议使用 Chrome 的设备模拟器来测试手机屏幕。

Setting modal sizes for Magnific popup