如何防止2个jquery对话框之间的交互

时间:2014-01-29 16:00:12

标签: jquery google-chrome dialog interaction

我希望同时打开2个jquery对话框并独立导航其内容。我的问题是,当我在一个对话框中的任何地方单击时,它会重置另一个对话框中的内容。它只发生在Chrome中,在IE和Firefox中都不会发生。

内容是一个包含多个帧的Flash文件。通过单击作为Flash文件的一部分添加的按钮,可以更改显示的框架。这都是使用SWFTOOLS可执行文件完成的。 “重置”意味着恢复到起始帧。

当Flash文件直接以HTML格式显示而没有对话框时,Chrome中不会重置。因此,只有在使用Chrome查看jquery对话框中的内容时才会出现此问题。

如何更改我的脚本以便Chrome中不会发生任何互动?如果做不到这一点,我应该搜索什么术语以确定我需要做什么?

我的PHP和Javascript代码如下所示。

<!DOCTYPE HTML>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<?php
$file_details=array(
    array('filename'=>'Cookie law.swf','width'=>695,'height'=>842),
    array('filename'=>'cookies_guidance_v3.swf','width'=>595,'height'=>842),
);
foreach($file_details as $id=>$file_detail){
    extract($file_detail);
    openDialog($id,$filename,$width,$height);
}
?>

<?php
function openDialog($id,$filename,$width,$height){
    $url_dirname='http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['REQUEST_URI']);
    $url=$url_dirname.'/'.$filename;
    ?>
    <!-- Adds the link -->
    <a href=# id='opener<?php echo $id ?>' >View <?php echo $filename ?></a><br /><br />
    <!-- Adds content to the dialog box which appears when the link is clicked -->
    <div id='dialog<?php echo $id ?>' style='border:0px solid blue;display: none;'>
        <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' style='border:0px solid green;' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' width='<?php echo $width ?>' height='<?php echo $height ?>' align='' >
            <param name='movie' value='<?php echo $url ?>' />
            <param name='quality' value='high' />
            <param name='bgcolor' value='#FFFFFF' />
            <param name='wmode' value='opaque'>
            <embed src='<?php echo $url ?>' style='border:0px solid green;' quality='high' bgcolor='#FFFFFF' width='<?php echo $width ?>' height='<?php echo $height ?>' align='left' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' wmode='opaque'/>
            </object>
    </div>
    <!-- Acts when the link is clicked -->
    <script>
        $(function() {
            $("#dialog<?php echo $id ?>").dialog({
                autoOpen: false,
                show: {
                    effect: 'fade',
                    duration: 300,
                },
                hide: {
                    effect: 'fade',
                    duration: 300,
                },
                beforeClose:function(){
                    $("#opener<?php echo $id ?>").attr('src','./icons/view2.png');
                },
            });
            $("#opener<?php echo $id ?>").click(function() {
                $("#dialog<?php echo $id ?>").dialog({width:'auto'});
                $("#dialog<?php echo $id ?>").dialog("open");
                $("#dialog<?php echo $id ?>").dialog("option", "title", 'Viewer');   //set here to prevent annoying tooltip if set in div
                $(this).attr('src','./icons/eye.png');
            });
        });
    </script>
    <?php
}
?>

以下显示了生成的HTML。

<!DOCTYPE HTML>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<!-- Adds the link -->
<a href=# id='opener0' >View Cookie law.swf</a><br /><br />
<!-- Adds content to the dialog box which appears when the link is clicked -->
<div id='dialog0' style='border:0px solid blue;display: none;'>
        <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' style='border:0px solid green;' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' width='695' height='842' align='' >
            <param name='movie' value='http://vhosts/work/Cookie law.swf' />
            <param name='quality' value='high' />
            <param name='bgcolor' value='#FFFFFF' />
            <param name='wmode' value='opaque'>
            <embed src='http://vhosts/work/Cookie law.swf' style='border:0px solid green;' quality='high' bgcolor='#FFFFFF' width='695' height='842' align='left' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' wmode='opaque'/>
        </object>
</div>
<!-- Acts when the link is clicked -->
<script>
    $(function() {
        $("#dialog0").dialog({
            autoOpen: false,
            show: {
                effect: 'fade',
                duration: 300,
            },
            hide: {
                effect: 'fade',
                duration: 300,
            },
            beforeClose:function(){
                $("#opener0").attr('src','./icons/view2.png');
            },
        });
        $("#opener0").click(function() {
            $("#dialog0").dialog({width:'auto'});
            $("#dialog0").dialog("open");
            $("#dialog0").dialog("option", "title", 'Viewer');   //set here to prevent annoying tooltip if set in div
            $(this).attr('src','./icons/eye.png');
        });
    });
</script>
<!-- Adds the link -->
<a href=# id='opener1' >View cookies_guidance_v3.swf</a><br /><br />
<!-- Adds content to the dialog box which appears when the link is clicked -->
<div id='dialog1' style='border:0px solid blue;display: none;'>
        <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' style='border:0px solid green;' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' width='595' height='842' align='' >
            <param name='movie' value='http://vhosts/work/cookies_guidance_v3.swf' />
            <param name='quality' value='high' />
            <param name='bgcolor' value='#FFFFFF' />
            <param name='wmode' value='opaque'>
            <embed src='http://vhosts/work/cookies_guidance_v3.swf' style='border:0px solid green;' quality='high' bgcolor='#FFFFFF' width='595' height='842' align='left' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' wmode='opaque'/>
        </object>
</div>
<!-- Acts when the link is clicked -->
<script>
    $(function() {
        $("#dialog1").dialog({
            autoOpen: false,
            show: {
                effect: 'fade',
                duration: 300,
            },
            hide: {
                effect: 'fade',
                duration: 300,
            },
            beforeClose:function(){
                $("#opener1").attr('src','./icons/view2.png');
            },
        });
        $("#opener1").click(function() {
            $("#dialog1").dialog({width:'auto'});
            $("#dialog1").dialog("open");
            $("#dialog1").dialog("option", "title", 'Viewer');   //set here to prevent annoying tooltip if set in div
            $(this).attr('src','./icons/eye.png');
        });
    });
</script>

更新

Implementing browser-compliant dialogs using jQuery(请参阅该链接中的更新3)显示了此问题的解决方案。

0 个答案:

没有答案