巨大的弹出窗口 – 标题为iframe /视频在宏伟的弹出窗口

发布时间：2020-12-14 19:33:56 所属栏目：资源来源：网络整理

导读：我需要显示视频弹出窗口的标题/标题.在图像类型中,有这样的选项,但是对于视频/ iframe来说是不可取的. 在文档(http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe_type)中,我发现了模板标记的例子,但我不明白如何使标题可见. 请帮助我

我需要显示视频弹出窗口的标题/标题.在图像类型中,有这样的选项,但是对于视频/ iframe来说是不可取的.

在文档(http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe_type)中,我发现了模板标记的例子,但我不明白如何使标题可见.

请帮助我设置iframe标记以在弹出窗口中从链接中显示标题

<a class="popup" title="This is caption" href="http://vimeo.com/41128754"></a>

JS代码

$('a.popup').magnificPopup({
        disableOn: 700,type: 'iframe',mainClass: 'mfp-fade',removalDelay: 160,preloader: false,fixedContentPos: true,titleSrc: 'title'

    });

谢谢.

解决方法

有点迟了,但有可能有助于其他任何人寻找答案.

“titleSrc”属性仅适用于type：image,它不适用于iframe.
Magnific Popup的开发者有一个例子,说明如何在iframe弹出窗口中添加标题：http://codepen.io/dimsemenov/pen/zjtbr

这是JS：

$('.popup').magnificPopup({
  type: 'iframe',iframe: {
     markup: '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '<div class="mfp-title">Some caption</div>'+
              '</div>'
  },callbacks: {
    markupParse: function(template,values,item) {
     values.title = item.el.attr('title');
    }
  },// your other settings
});

要使标题出现,您必须包括此CSS：

.mfp-title {
  position:absolute;
  /* other formatting */
}

这是做什么的

>标记是将一个带有mfp-title类的新div添加到框架包装器中,用于显示标题.
> markupParse回调从链接获取标题属性,如果有一个,并将其添加到新的div.
>这个标题添加到视频底部的标题,无论它包含哪个.mfp-title div,因为它使用绝对定位.您需要使用CSS将其定位在顶部,例如顶部：-20px;左：0; (您需要使用负值将顶部移动到iframe上方)

开发人员在这里提供了一系列示例,可以帮助任何人寻找如何处理文档中未涉及的内容.
http://codepen.io/collection/nLcqo/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!