Make an swf appear only in a jquery ui modal window on all browsers

I have an html page that has content.

On the same page but hidden is a div with a .swf animation in it. It is hidden because the dialog has autoOpen set to false.

I also have JQuery / JQuery UI.

When a button is clicked on the base page the div is opened as a modal dialog box and the swf plays in a loop until the modal box is dismissed.

In Safari this works as i expect. Page loads and sits there. Button is clicked and dialog appears etc. Button clicked and it disappears.

However in Firefox, Camino and Chrome the base page briefly flashes the content and the the swf starts playing. Nothing os the underlying page or the modal box shows.

The div containing the swf is at the end of the code. I moved to the start of the code in case it was a loading sequence issue but that had no effect.

All the browsers are the latest versi开发者_Go百科ons.

You need to load the swf only when the button is clicked and remove it when dialog closed. You can use swfobject to add the swf and events "open" / "close" of jquery ui dialog.