jquery - Why is jQuery loading multiple dialogs?

Question

I click on the image. Then the dialog opens. I close the dialog and reclick the image to open it. The I see 2 dialogs opened when I scroll down. Can anyone explain why is it happening. I want the dialog to be opened and closed only once.

jsFiddle link here: http://jsfiddle.net/Wqtfu/

jQuery(document).ready(function(){
    var dialogOpts = {
            title: "Fullscreen",
            modal: true,
            autoOpen: false,
            width: jQuery(window).width(),
            height: jQuery(window).height(),
            maxwidth: jQuery(window).width(),
            maxheight: jQuery(window).height(),
            closeOnEscape: true,
            draggable: false,
            resizable: false,
            zIndex: 99999999,
            open: function() {
               jQuery("#zoomframe").append(jQuery("<iframe />").attr({src: "www.google.com",
                                                                        frameborder: "0",
                                                                        scrolling: "no",
                                                                        width: jQuery(window).width(),
                                                                        height: jQuery(window).height()
                                                                         }));
            },
            close: function() {
                jQuery(this).hide();
            }

            };

    jQuery("#zoomframe").dialog(dialogOpts);

    jQuery("#mainimage").click(
                function (event){
                    event.preventDefault();
                    jQuery("#zoomframe").dialog("open");
                    return false;
    });

});

Answer 1

正如MrOBrian在对问题的评论中所说的那样，我将我的代码更新为以下内容并且它有效！

jQuery(document).ready(function(){
    var dialogOpts = {
            title: "Fullscreen",
            modal: true,
            autoOpen: false,
            width: jQuery(window).width(),
            height: jQuery(window).height(),
            maxwidth: jQuery(window).width(),
            maxheight: jQuery(window).height(),
            closeOnEscape: true,
            draggable: false,
            resizable: false,
            zIndex: 99999999,
            open: function() {
               jQuery("#zoomframe").append(jQuery("<iframe />").attr({src:    "www.google.com",
                                                                        id: "myzoomframe",
                                                                        frameborder: "0",
                                                                        scrolling: "no",
                                                                        width: jQuery(window).width(),
                                                                        height: jQuery(window).height()
                                                                         }));
            },
            close: function() {
                jQuery(this).hide();
                jQuery('#myzoomframe').remove();
            }

            };

    jQuery("#zoomframe").dialog(dialogOpts);

    jQuery("#mainimage").click(
                function (event){
                    event.preventDefault();
                    jQuery("#zoomframe").dialog("open");
                    return false;
    });

});