javascript dialog over a flash movie
ajax, dialog, flash, javascript, jquery
Solution
Transparent won't work for this. In order to show HTML over Flash, you need to show your movie with `wmode="opaque"`.
Also, setting CSS zIndex property to 0 for the movie and 1000 (or anything above 0) to the popup will help in some browsers.
Problem
I have a such system: When the mainsite opens, A flash image gallery appears, when the user clicks on an image, using the Flash's "ExternalInterface.call" function, I call a javascript function that opens a java dialog modal named nyromodal (which fetches raw HTML data via ajax from another page inside the dialog box) on the flash movie. And thats when problem happens: In Google Chrome it works well as intended, however issues happen with other browsers: With internet explorer, dialog opens but when I click the "close" button the dialog stays there, weirdly if I minimize the IE button and maximize it, the dialog dissapears. With Firefox, while opening the triggered dialog, dialog windows displays nothing but some corrupted graphics but if I move my mouse, it shows the contents. What can cause this problem? How can I fix it ? Here is the source code, site is not up on anywebsite thus I am not able to show it directly: ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="/media/style.css" rel="stylesheet" /> <link rel="stylesheet" href="/media/nyroModal.full.css" type="text/css" media="screen" /> <script type="text/javascript" src="/media/jquery.js"></script> <script language="javascript">AC_FL_RunContent = 0;</script> <script type="text/javascript" src="/media/AC_RunActiveContent.js"></script> <script type="text/javascript" src="/media/jquery.nyroModal-1.5.2.pack.js"></script> <script type="text/javascript"> function showItem(i,x){ var myurl = "/item/?i="+i; $.nyroModalManual({url:myurl,title:x}); } </script> </head> <body bgcolor="#000000"> <!--url's used in the movie--> <!--text used in the movie--> <!-- saved from url=(0013)about:internet --> <div STYLE="z-index: 1;"><center> <script language="javascript"> if (AC_FL_RunContent == 0) { alert("This page requires AC_RunActiveContent.js."); } else { AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0', 'width', '100%', 'height', '600', 'src', '/media/preview', 'quality', 'high', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'align', 'middle', 'play', 'true', 'loop', 'true', 'scale', 'noScale', 'wmode', 'transparent', 'devicefont', 'false', 'id', 'preview', 'bgcolor', '#2e2e2e', 'name', 'preview', 'menu', 'true', 'allowFullScreen', 'false', 'allowScriptAccess','sameDomain', 'movie', '/media/preview', 'salign', '' ); //end AC code } </script> <noscript> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="1024" height="850" id="preview" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="/media/preview.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /> <embed src="/media//media/preview.swf" quality="high" bgcolor="#000000" width="100%" height="850" name="preview" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </noscript> </center> </div> </body> </html> ```