JQModal 在 iframe 上显示并使用 ?wmode=opaque

Posted 2023-02-24

【中文标题】JQModal 在 iframe 上显示并使用 ?wmode=opaque

【英文标题】：JQModal showing over iframe and use of ?wmode=opaque

【发布时间】：2013-09-18 18:21:00

【问题描述】：

这是一个很好的...

使用 JQModal 的网站，除了 iframe 位于模态框顶部之外，一切正常。

简单的解决方法是将 ?wmode=opaque 添加到 youtube 链接的末尾，但这会破坏我在模型关闭时启动视频的 javascript。

想法？

以下是相关代码：

html：

  <div>
     <iframe id='youTube_video'   src="//www.youtube.com/embed/io78hmjAWHw" frameborder="0" allowfullscreen></iframe>
  </div>

Javascript：

jQuery(function($)
$('#my-modal').jqm(
    overlayClass: 'jqm-overlay',
    closeClass: 'jqm-close',
    onHide: function(hash)
        $('#youTube_video').attr('src', $('#youTube_video').attr('src')+ '?autoplay=1');
        hash.w.fadeOut('2000', function() hash.o.remove(););
    

)
$('#my-modal').jqmShow()
);

如您所见，当用户点击页面时，模式关闭，视频开始播放。如果没有 ?wmode=opaque，则 iframe 位于前面。如果我将 ?wmode=opaque 添加到 html URL，它会破坏视频启动脚本。

想法？

【问题讨论】：

这是模态框如何消失在 iframe 后面的屏幕截图 d.pr/i/y5SP

【参考方案1】：

这样做有什么问题？

$('#youTube_video').attr('src', $('#youTube_video').attr('src')+ '?autoplay=1&wmode=opaque');

【讨论】：

不幸的是，iframe 在页面加载时需要是 &wmode=opaque 以便它保持在 JQModal 之后。如果在视频开始后加载模态框，这将起作用。