【问题标题】:Magnific popup not working properly大型弹出窗口无法正常工作
【发布时间】:2015-12-17 07:40:48
【问题描述】:

宏伟的弹出窗口正在运行,但不是我想要的方式。

这里是Plnkr

为什么它不起作用?这是jQuery代码:

$('.view').click(function() {
    $('.image-popup').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        mainClass: 'mfp-img-mobile',
        image: {
            verticalFit: true
        }
    });
});

【问题讨论】:

    标签: javascript jquery magnific-popup


    【解决方案1】:

    你为什么不把你的html改成:

    <div class="pic">
        <a  class="image-popup-fit-width" href="http://farm4.staticflickr.cm/3721/9207329484_ba28755ec4_o.jpg" title="This image fits only horizontally.">
        <img src="pictureLink" width="75" height="75">
      </a>
      <p><a href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" class="image-popup-fit-width">Click to view</a></p>
      </div>
    

    【讨论】:

      【解决方案2】:

      锚标签需要有 image-popup-fit-width 类而不是 image-popup。

      <a  class="image-popup-fit-width" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" title="This image fits only horizontally.">
              <img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="75" height="75">
      </a>
      

      【讨论】:

      • 任何类名都有效,即使我使用 image-popup-fit。但这不是我的意思。我希望当有人点击查看文本时会触发弹出窗口。
      猜你喜欢
      • 2020-02-15
      • 2013-07-07
      • 2015-01-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多