Question

需要Magnific插件帮助解决我的问题。我们的第三方开发人员开发了一个脚本来加载内联内容。它工作正常。

现在客户端需要在单击链接时使用IFRAME加载“html”内容。不知道如何修改现有的JS文件来添加iframe类型。

JS代码：

<a href="test1.html" class="iframe-popup-link">
  <img src="http://lorempixel.com/300/150/food/" alt="">
</a>

HTML （内联内容的现有HTML结构）

{{1}}

HTML：（需要加载IFRAME）

必须在内联容器

等弹出窗口内调用HTML文件

{{1}}

另请告诉我如何为IFRAME容器定义HTML结构。

提前致谢

Answer 1

你还可以分享更多的JS吗？最好是与test.popup

对应的所有代码

此代码未经过测试，但请尝试将此.open函数中的代码更改为：

    $.magnificPopup.open({
                    tClose: options.closelabel,
                    tLoading: options.loadinglabel,
                    modal: modal,
                    type: 'iframe',
                    preloader: false,
                    midClick: true,
                    mainClass: 'mfp-fade',
                    removalDelay: 300,
                    closeMarkup: '<button title="%title%" type="button" class="mfp-close"></button>',
                    iframe: {
                      markup: '<div class="mfp-iframe-scaler">'+
                    '<div class="mfp-close"></div>'+
                    '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                  '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button
              srcAction: 'iframe_src', // Templating object key. First part defines CSS selector, second attribute. "iframe_src" means: find "iframe" and set attribute "src".
          },
                callbacks: {
                    open: function () {
                        log('popup open');
                        target.trigger('popupOpen');
                    },
                    close: function () {
                        log('popup close');
                        target.trigger('popupClose');

                        if ($(target).parent().hasClass('slides-item') && $(target).parent().parent().find('.slides-item').length > 1) {
                            TEST.carousel.playCarousel($(target).parent().parent().parent().parent());
                        }
                    }
                }
            });

然后打开iframe的链接将是：

<a href="http://www.linktowebpage.com" class="link-popup">
   <img src="http://lorempixel.com/300/150/food/" alt="Image">
</a>

以下是打开iframe http://jsfiddle.net/p90ysz80/2/

的代码的小提琴

使用iframe加载HTML链接内容的Magnific弹出窗口

1 个答案: