jquery - 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;
    });

});