Implementing browser-compliant dialogs using jQuer

I would like to show a jquery dialog which contains an iframe when the user clicks a link. Unfortunately I am unable to set this up so that the dialog closes down properly when the close (X) in the dialog is clicked in all the major browsers (Chrome, IE, FF, Safari and Opera) I can write code specifically for IE or Safari but so far my attempts to write common code which work in both have failed.

The following shows my code.

<!DOCTYPE HTML>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script>
<link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.10.2/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function () {
$('a#pop1').click(function() {
    var page = "Cookie law.swf";
    var $dialog1 = $('<div></div>')
    .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
    .dialog({
        autoOpen: false,
        modal: false,
        height: 625,
        width: 500,
        title: "Some title",
        close: function (event, ui) {
                $dialog1.html("destroy");
        },
      });
    $dialog1.dialog('open');
});
});
</script>
<a id="pop1" href='#'>My SWF</a>

The above code works in all browsers except for IE. When I click the close icon, the dialog frame disappears but the dialog content remains visible. The only way I can make the complete pop-up disappear is to (ironically) remove the line which says $dialog1.html("destroy"). The reason why I have included this line is because without it the same behaviour occurs in Safari.

Does anyone know how to change the above code so that it works in both browsers?

Update 1

The following code appears to work in all 5 browsers.

$('a#pop1').click(function() {
var page = "Cookie law.swf";
var $dialog1 = $('<div></div>')
.html('<iframe id="myiframe" style="border: 1px solid red; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
    autoOpen: false,
    modal: false,
    height: 625,
    width: 500,
    title: "Some title",
    close: function (event, ui) {
        document.getElementById("myiframe").contentDocument.documentElement.innerHTML = "";
    },
  });
$dialog1.dialog('open');
});

Update 2

The following shows simpler code when viewing 2 dialogs simultaneously. However there is a problem with this code and the code shown above when 2 dialogs are open. That is, when closing the second dialog, the dialog content remains visible when browsing with IE. An ability to browse 2 dialogs simultaneously and close them properly would be very helpful.

<!DOCTYPE HTML>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script>
<link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.10.2/themes/smoothness/jquery-ui.css">
<!-- -->
<a id="pop1" href='#'>First SWF</a>
<script>
$(document).ready(function () {
$('a#pop1').click(function() {
    var page1 = "Cookie law.swf";
    var $dialog1 = $('<div></div>')
    .html('<iframe id="myiframe1" style="border: 0px; " src="' + page1 + '" width="100%" height="100%"></iframe>')
    .dialog({
        autoOpen: false,
        modal: false,
        height: 625,
        width: 500,
        title: "Some title",
        close: function (event, ui) {
            $("#myiframe1").contents().find("body").html('');
        },
    });
    $dialog1.dialog('open');
});
});
</script>
<!-- -->
<a id="pop2" href='#'>Second SWF</a>
<script>
$(document).ready(function () {
$('a#pop2').click(function() {
    var page2 = "cookies_guidance_v3.swf";
    var $dialog2 = $('<div></div>')
    .html('<iframe id="myiframe2" style="border: 0px; " src="' + page2 + '" width="100%" height="100%"></iframe>')
    .dialog({
        autoOpen: false,
        modal: false,
        height: 625,
        width: 500,
        title: "Some title",
        close: function (event, ui) {
            $("#myiframe2").contents().find("body").html('');
        },
    });
    $dialog2.dialog('open');
});
});
</script>

Update 3

OK. The following HTML code produced by my PHP script now appears to work in all the major browsers (Chrome, IE, FF, Safari and Opera). I did 2 things. Firstly I set the wmode mode. According to Flash on top of jQuery dialog the Flash Player takes over all rendering and affects the layering. I also changed the version of jquery being used from 1.10.2 to 1.9.1. Apparently in Version 1.10.0, z-indexing behaviour was changed. See Why jQuery UI 1.10 remove jquery dialog zIndex option? and http://bugs.jqueryui.com/ticket/9166?cversion=0&cnum_hist=6 for further details.

These 2 changes appear to have resolved the following 2 issues.

(a) Unwanted resetting of the frame to the first frame in the second dialog when the first dialog is clicked.

(b) Inability to make dialog content disappear when the close icon in the top right corner of the dialog is clicked.

<!--
This simplified PHP script enables SWF files converted from multipage PDF documents
and combined with a viewer to be simultaneously viewed and navigated.

A link is displayed for each SWF file which when clicked shows the SWF in a popup dialog
which can be dragged across and placed anywhere on the screen.

The dialogs are scaled to maximum size which can fit on the screen.
-->
<!DOCTYPE HTML>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/redmond/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<!-- Adds the link -->
<a id='opener0' style='color:blue;cursor:pointer'>View Cookie law.swf</a><br />
<!-- Sets the dialog behaviour when the link is clicked and the dialog is closed -->
<script>
    $(function() {
        $("#dialog0").dialog({
            autoOpen: false,
            show: {
                effect: 'fade',
                duration: 300,
            },
            hide: {
                effect: 'fade',
                duration: 300,
            },
        });
        $("#opener0").click(function() {
            // Gets the margins surrounding the SWF
            var horizontal_margin='60';
            var vertical_margin='60';
            // Gets the browser aspect ratio
            var browser_width = $(window).width();
            var browser_height = $(window).height();
            var browser_aspect_ratio=browser_width/browser_height;
            // Gets the SWF aspect ratio
            var swf_width='695';
            var swf_height='842';
            var swf_aspect_ratio=swf_width/swf_height;
            //Gets width and height of the SWF which will fit the browser
            if(swf_aspect_ratio < browser_aspect_ratio){
                // If the aspect ratio of the swf is less than that of the browser
                // then the height of the swf is limited by the height of the browser.
                swf_height=browser_height-vertical_margin*2;
                swf_width=swf_height*swf_aspect_ratio;
            }else{
                // If the aspect ratio of the browser is less than that of the swf
                // then the width of the swf is limited by the width of the browser.
                swf_width=browser_width-horizontal_margin*2;
                swf_height=swf_width/swf_aspect_ratio;
            }
            // Sets width and height of the SWF
            $('.myobject0').width(swf_width);
            $('.myobject0').height(swf_height);
            $('.myembed0').width(swf_width);
            $('.myembed0').height(swf_height);
            // Carries out actions on the dialog
            $("#dialog0").dialog({width:'auto'});
            $("#dialog0").dialog("open");
            $("#dialog0").dialog("option", "title", 'Viewer');   //prevents annoying tooltip if set in div
        });
    });
</script>
<!-- Adds content (i.e. the SWF file) to the dialog which appears when the link is clicked -->
<div id='dialog0' style='border:0px solid blue;display: none;'>
        <object class='myobject0' 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'>
            <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  class='myembed0' src='http://vhosts/work/Cookie law.swf' style='border:0px solid green;'
            quality='high' bgcolor='#FFFFFF' align='left' type='application/x-shockwave-flash'
            pluginspage='http://www.macromedia.com/go/getflashplayer' wmode='opaque'/>
        </object>
</div>
    <!-- Adds the link -->
<a id='opener1' style='color:blue;cursor:pointer'>View cookies_guidance_v3.swf</a><br />
<!-- Sets the dialog behaviour when the link is clicked and the dialog is closed -->
<script>
    $(function() {
        $("#dialog1").dialog({
            autoOpen: false,
            show: {
                effect: 'fade',
                duration: 300,
            },
            hide: {
                effect: 'fade',
                duration: 300,
            },
        });
        $("#opener1").click(function() {
            // Gets the margins surrounding the SWF
            var horizontal_margin='60';
            var vertical_margin='60';
            // Gets the browser aspect ratio
            var browser_width = $(window).width();
            var browser_height = $(window).height();
            var browser_aspect_ratio=browser_width/browser_height;
            // Gets the SWF aspect ratio
            var swf_width='595';
            var swf_height='842';
            var swf_aspect_ratio=swf_width/swf_height;
            //Gets width and height of the SWF which will fit the browser
            if(swf_aspect_ratio < browser_aspect_ratio){
                // If the aspect ratio of the swf is less than that of the browser
                // then the height of the swf is limited by the height of the browser.
                swf_height=browser_height-vertical_margin*2;
                swf_width=swf_height*swf_aspect_ratio;
            }else{
                // If the aspect ratio of the browser is less than that of the swf
                // then the width of the swf is limited by the width of the browser.
                swf_width=browser_width-horizontal_margin*2;
                swf_height=swf_width/swf_aspect_ratio;
            }
            // Sets width and height of the SWF
            $('.myobject1').width(swf_width);
            $('.myobject1').height(swf_height);
            $('.myembed1').width(swf_width);
            $('.myembed1').height(swf_height);
            // Carries out actions on the dialog
            $("#dialog1").dialog({width:'auto'});
            $("#dialog1").dialog("open");
            $("#dialog1").dialog("option", "title", 'Viewer');   //prevents annoying tooltip if set in div
        });
    });
</script>
<!-- Adds content (i.e. the SWF file) to the dialog which appears when the link is clicked -->
<div id='dialog1' style='border:0px solid blue;display: none;'>
        <object class='myobject1' 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'>
            <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  class='myembed1' src='http://vhosts/work/cookies_guidance_v3.swf' style='border:0px solid green;'
            quality='high' bgcolor='#FFFFFF' align='left' type='application/x-shockwave-flash'
            pluginspage='http://www.macromedia.com/go/getflashplayer' wmode='opaque'/>
        </object>
</div>

Update 4

If there is a need to add buttons to dialogs which call methods, you may want to use Version 1.9.2 of the jqueryui library whilst keeping the jquery (core) version at 1.9.1. This is because 1.9.2 of the ui has less of a tendency to fail in this context than 1.9.1. In fact Version 1.9.1 of the ui fails and reports an error message saying that you cannot add methods prior to initialization. (I spent a whole day yesterday trying unsuccessfully to find a solution to this. I only found this solution today having spent a whole morning on it.)

The following code works.

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!-- Shows the link which is clicked-->
<a id='cookie_opener' style='color:blue;cursor:pointer;'>Click me</a>
<script>
$(function() {
// Initializes the dialog
$("#cookie_dialog").dialog({
    autoOpen: false,
    buttons: {
        Ok: function() {$(this).dialog( "close" );}
    }
});
// Adds methods to the dialog
$("#cookie_opener").click(function() {
    $("#cookie_dialog").dialog("open");
});
});
</script>
<!-- Shows the dialog when the dialog is opened -->
<div id='cookie_dialog'>Dialog content goes here.</div>

If jqueryui/1.9.2 is changed to jqueryui/1.9.1 on the 3rd line it fails.

As noted above in Update 3, the reason why I am using Version 1.9 instead of 1.10 or 1.11 is because when using these later versions I could not find a way of catering for Google Chrome when simultaneously browsing 2 Flash files without clicks in one dialog resetting content in the other back to the start frame. I may stick to using version 1.9.1 for the core and 1.9.2 for the ui for several years now in view of how much effort has been spent reaching this point. Today is 05Feb14 and 1.9.1 was the latest stable version of the core from 04Feb13 to 24May13.

I am beginning to appreciate how challenging it is to implement browser-compliant yet simple code and why it is so important to carefully select the jQuery version when doing this! Yesterday will probably go down as one of the most frustrating days I have ever experienced grappling with jQuery.

标签： jquery cross-browser dialog version

0条回答