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

前端之家收集整理的这篇文章主要介绍了巨大的弹出窗口 – 标题为iframe /视频在宏伟的弹出窗口前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要显示视频弹出窗口的标题/标题.在图像类型中,有这样的选项,但是对于视频/ 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/

原文链接:https://www.f2er.com/html/224253.html

猜你在找的HTML相关文章