javascript dialog over a flash movie_问答_开发者

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>

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.

var flashFlag = false;
var flashObjs;

// on javascript Dialog open event
flashFlag = checkflashContent();

function checkflashContent() {    
    //alert('checking for flash');    
    var flashObjects = new Array();    
    var flag = false;

    for (i = 0; i < document.getElementsByTagName("object").length; i++) {    
        flashObjects[i] = document.getElementsByTagName("object")[i];

        // alert('found flash');    
        jQuery(flashObjects[i]).hide();    
        flag = true;    
    }    
    flashObjs = flashObjects;    
    return flag;    
}

// on Javascript dialog close event
function closeDialog(){
...
...
if (flashFlag) {    
    //alert('dialog closed, showing flash');

    for (i = 0; i < flashObjs.length; i++) {    
        jQuery(flashObjs[i]).show();    
    }    
}

// On Open Event get the elements by tag Name (OBJECT) 
// and use jQuery .hide to hide the content and on 
// dialog close event use jQuery .show to show the flag back.

You need to embed the flash using the transparent or opaque wmode.

But be prepared to have some fun. There are some odd bugs surrounding it.

It sounds like you have something corrupt with your browser installations, this should seriously not even remotely be an issue regardless of embed configuration. Alert windows are generated more or less at the Win32/OS level, if they are displaying improperly or with corruption, then your computer is f'ed.

You have a strange mixture of old school HTML and XHTML there. I'd take out the center tag, the bgcolor attribute on the body and put the style for the wrapper div into a style, even if it's just embedded in the page.

That said, the only thing I can think that might be giving it some issues is that you have the z-index set on the div, but no position. Try adding position: relative to the div and see if that cures what ails you.