为什么jQuery加载多个对话框？

Question

我点击图片。然后对话框打开。我关闭对话框并重新点击图像以将其打开。当我向下滚动时，我看到2个对话框打开了。任何人都可以解释为什么会这样。我希望对话框只能打开和关闭一次。

jsFiddle链接：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;
    });

});