How to stop Flash content shine-through jQuery UI

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

Please be warned that changing the wmode of your Flash animation will seriously increase the CPU load of you machine and slow down your animations. The Flash player uses its own window on top of the browser window for good reason. With wmode set to opaque Flash is forced to render into the browser window. With wmode=transparent it even must merge its renderings with existing browser stage content.

I usually use the same technique that is also used by many lightbox scripts: switch all Flash movies invisible as long as the dialog is visible. This should NOT be done by setting display:none. The result could be shifted content in the rest of the page if the Flash rectangle is not on stage any more. For the same reason you should NOT use jQueries hide() method. Instead, use visibility:hidden which still occupies the space of the hidden element.

Here is my way of doing it:

$('#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');
        //
    }
});

Answer 2

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

Answer 3

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

Answer 4

Try the wmode=transparent or wmode=opaque parameter.

Answer 5

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 6

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