How to stop Flash content shine-through jQuery UI Dialog in Firefox on Windows

Question

I'm using the jQuery UI dialog box, in IE & FF on Windows I'm getting underlying Flash content shining through the dialog box.

I resolved this on IE by enabling the bgiframe option on the jQuery dialog window and changing the bgiframe script to apply to any windows browsers, however I'm still getting the shine-through on FF.

Note that I can't know exactly where the Flash content will be showing as it is usually Flash widgets that users have added to pages, although I have thought about hiding the Flash content temporarily while displaying the dialog box - is this the only option left to me?

Answer 1

Try the wmode=transparent or wmode=opaque parameter.

Answer 2

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

Answer 3

I'd faced similar problem once. I simply hide the flash and show it again when dialog is dismissed:

<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");
    }

Answer 4

the jquery ui dialog uses a css file called jquery-ui-x.x.css where x.x indicated the version

in this file you can give the .ui-dialog class overflow:auto; this will solve the problem