How to stop flash content shine-through JQuery UI Dialog in FF 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

Either use iFrame in dialog box or hide flash contents on page when dialog box is fired.

Answer 2

Try the wmode=transparent or wmode=opaque parameter.

Answer 3

Have you done anything with the z-order in your css/html for your flash content?

Answer 4

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 5

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

Answer 6

The answer quark provided worked perfect for me! Thanks.

Answer 7

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