使用 iframe 加载 HTML Link 内容的宏伟弹出窗口

Question

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

现在客户端需要在单击 link 时使用 IFRAME 加载 "html" 内容。不确定如何修改现有的 JS 文件以添加 iframe 类型。

JS代码：

TEST.overlay.initOverlay();

TEST.overlay = (function () {
    function Overlay() {
        var _this = this;
        this.initOverlay = function(){
            $('.popup-link').on('click', function(){
                var contentHTML = $(this).data('overlay-container');
                _this.open(false, $('.'+contentHTML).html(), $(this), {});
            });
        };


        this.open = function(modal, contentHTML, target, options ) {      
            $.magnificPopup.open({
                tClose: options.closelabel,
                tLoading: options.loadinglabel,
                modal: modal,
                preloader: false,
                midClick: true,
                mainClass: 'mfp-fade',
                removalDelay: 300,
                closeMarkup: '<button title="%title%" type="button" class="mfp-close"></button>',
                items: {
                    src: contentHTML,
                    type: 'inline'
                },
                callbacks: {
                    open: function () {
                        target.trigger('overlayOpen');
                    },
                    close: function () {
                        target.trigger('overlayClose');
                    }
                }
            });
        };

        this.close = function() {
            $.magnificPopup.close();
        };

    }
    return new Overlay();
}());

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

<a href="javascript:;" class="popup-link" data-overlay-container="overlay-content-1">
   <img src="http://lorempixel.com/300/150/food/" alt="">
</a>

HTML:（需要加载 IFRAME）

必须像内联容器一样在弹出窗口中调用 HTML 文件

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

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

提前致谢

Answer 1

有没有更多的JS可以分享？最好是所有对应于 test.popup

的代码

此代码未经测试，但请尝试将 this.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 的 link 将是：

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

这里是 fiddle 用于打开 iframe 的代码 http://jsfiddle.net/p90ysz80/2/

使用 iframe 加载 HTML Link 内容的宏伟弹出窗口

Magnific popup to load HTML Link contents using iframe

jquery

magnific-popup