All geek questions in one place

Javascript dialog over flash movie

I have such a system: When the main site opens, the flash image gallery appears, when the user clicks on the image using the Flash function "ExternalInterface.call", I call the javascript function, which opens a java mode dialog called nyromodal (which retrieves the raw HTML data via ajax from another page inside the dialog box) in a flash movie. And this is when the problem occurs:

It works fine on Google Chrome as intended, but problems occur with other browsers:

  • A dialog opens with Internet explorer, but when I click the close button, the dialog remains there, it’s strange if I hide the IE button and maximize it, the dialogue will disappear.

  • In Firefox, when you open a dialog box, only some damaged graphics are displayed, but if I move the mouse, it shows the contents.

What can cause this problem? How can i fix this?

Here is the source code, the site is not included on anywebsite, so I can not 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 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>
+3
source share
6 answers

Transparent will not work for this. To show HTML on top of Flash, you need to show your movie with wmode="opaque".

Also, setting the zIndex CSS property to 0 for the movie and 1000 (or anything above 0) for the popup will help in some browsers.

+8
source

, iframe shim, . .

+1
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.
+1

wmode.

. , .

0

, - , , . Win32/OS, , .

0

You have a weird mixture of old school HTML and XHTML. I would take out the central tag, the bgcolor attribute on the body, and put the style for the div wrapper into the style, even if it is just embedded in the page.

However, the only thing I might think that this may be due to some problems is that you have a set of z-indexes on a div, but no position. Try adding a position: relative to the div and see if this cures you.

0
source

Source: https://habr.com/ru/post/1719821/

More articles:


All Articles