如何在 Windows 上的 Firefox 中停止 Flash 内容透亮 jQuery UI 对话框答案

【问题标题】：How to stop Flash content shine-through jQuery UI Dialog in Firefox on Windows如何在 Windows 上的 Firefox 中停止 Flash 内容透亮 jQuery UI 对话框
【发布时间】：2009-03-02 15:11:13
【问题描述】：

我正在使用 jQuery UI 对话框，在 Windows 上的 IE 和 FF 中，我正在通过对话框获取底层 Flash 内容。

我在 IE 上通过启用 jQuery 对话框窗口上的 bgiframe 选项并更改 bgiframe 脚本以适用于任何 Windows 浏览器解决了这个问题，但是我仍然在 FF 上得到了启发。

请注意，我无法确切知道 Flash 内容将显示在哪里，因为它通常是用户添加到页面的 Flash 小部件，尽管我曾考虑在显示对话框时暂时隐藏 Flash 内容 - 这是留给我的唯一选择？

【问题讨论】：

您是否对您的 Flash 内容的 css/html 中的 z 顺序进行了处理？

标签： jquery windows flash internet-explorer firefox

【解决方案1】：

试试wmode=transparent 或wmode=opaque 参数。

【讨论】：

如果通过 iframe 嵌入 youtube 视频，您可以将 ?wmode=transparent 附加到 src 属性的末尾。

【解决方案2】：

<object ...>
  ...
  <param name="wmode" value="opaque" />
  ...
  <embed ... wmode="opaque" ...></embed>
</object>

【讨论】：

【解决方案3】：

我曾经遇到过类似的问题。我只是隐藏闪光灯并在对话框关闭时再次显示它：

<script type="text/javascript">
    /*notification dialog setup*/
        function SetupDialog()
        {
            $("div#divNotice").dialog(
                {  autoOpen: false,
                   modal: true,
                   overlay: { opacity: 0.5, background: '#050505' },
                   buttons: {
                              "I Agree": function(){
                                            $("#Movie").css("display","inline")//Show movie when dialog is closed
                                            .......
                                        },
                              "Close" : function(){
                                            $("#Movie").css("display","inline") //Show Movie if dialog is closed
                                            $(this).dialog("close");
                                        }
                            },
                   title: "",
                   height: 500,
                   width: 600,
                   dialogClass: 'myDialog',
                   position: 'center'
                 }
            );
        }
    </script>
    <script type="text/javascript">
    function ShowDialog()
    {
        /*for Notice dialog */
        $("#divDialog").css("display","block");
        $("#Movie").css("display","none");
        $("div#divDialog").dialog("open");
    }

【讨论】：

【解决方案4】：

jquery ui 对话框使用一个名为 jquery-ui-x.x.css 的 css 文件，其中 x.x 表示版本

在这个文件中你可以给 .ui-dialog 类 overflow:auto;这将解决问题

【讨论】：

【解决方案5】：

请注意，更改 Flash 动画的 wmode 会严重增加计算机的 CPU 负载并减慢动画速度。 Flash 播放器在浏览器窗口顶部使用自己的窗口是有充分理由的。当 wmode 设置为 opaque 时，Flash 会被强制渲染到浏览器窗口中。使用 wmode=transparent 它甚至必须将其渲染与现有的浏览器舞台内容合并。

我通常使用许多灯箱脚本也使用的相同技术：只要对话框可见，就将所有 Flash 影片切换为不可见。这不应该通过设置 display:none 来完成。如果 Flash 矩形不再在舞台上，结果可能会在页面的其余部分中移动内容。出于同样的原因，您不应该使用 jQueries hide() 方法。相反，使用可见性：隐藏仍然占据隐藏元素的空间。

这是我的做法：

$('#myDialogId').dialog({
    open: function(){
        // hide any flash objects
        $('object').css('visibility', 'hidden');
        // hide any flash embeds
        $('embed').css('visibility', 'hidden');
    },
    close: function(){
        // show any flash objects
        $('object').css('visibility', 'visible');
        // show any flash embeds
        $('embed').css('visibility', 'visible');
        //
    }
});

【讨论】：

【解决方案6】：

在对话框中使用 iFrame 或在触发对话框时隐藏页面上的 flash 内容。

【讨论】：