从内部关闭 Jquery UI 对话框

Question

我有 2 个页面，比如 page1.html 和 page2.html。

page1.html 有这个代码：

$(document).ready(function() {
                   $('#mydialog').dialog({autoOpen : false, modal : true});
                   $('#myopenlink').click(function() {
                                             $('#mydialog').load('page2.html');
                                             $('#mydialog').dialog('open');
                                             return false;
                                           });                                 
                   });

page1.html 中的相关 HTML 元素：

<a href="#" id="myopenlink"> Open </a>
<div id="mydialog"> </div>

当我点击“myopenlink”时，我会得到一个显示 page2.html 的模式对话框。

现在，在 page2.html 中，我有另一个链接（或提交按钮等）。我想在单击对话框后关闭它（即从它加载的页面中关闭对话框）。

这可能吗？

编辑：

经过一番挖掘，我想我的问题不是专门针对对话框的。这就是我想要做的：

page2.html 内容：

<a href="#" id="mycloselink"> close </a>

page1.html 内容：

function closeLinkClicked(event) {
    event.preventDefault();
    alert('Please Reach this point so I replace this with close dialog');
}

function doneLoading(data) {
    $('#mydiv').on('click', '#mycloselink', closeLinkClicked);
}

$(document).ready(function() {
                             $('#mydiv').load('page2.html', doneLoading);
                            });

page1.html 当然也有这个：

<div id="mydiv"> </div>

当我单击从 page2 加载到 mydiv 中的链接时，没有任何反应（我希望显示警报）。

我做错了什么？

谢谢 谢谢

Answer 1

你好喜欢这个 demo http://jsfiddle.net/mhLc5/6/ 或更新答案 => 这个http://jsfiddle.net/Pb2eR/ 或 http://jsfiddle.net/Pb2eR/1/

动态追加演示：http://jsfiddle.net/Pb2eR/13/

所以要关闭对话框，您只需致电.dialog('close') 休息，演示将为您提供一个很好的玩耍场所。

API 驻留在此处：http://jqueryui.com/demos/dialog/

好读：http://forum.jquery.com/topic/close-a-jquery-ui-dialog-from-the-inside

希望这会有所帮助！

代码

 buttons: {

            'Submit': function() {
                $Dialog_div.dialog('close');
            }

示例代码的其余部分

var $Dialog_div;

function fnOpenDialog() {
    $Dialog_div = $('<div id=\'ThisDialog\'>Hello Page 2</div>').prependTo('body');

    $Dialog_div = $('#ThisDialog').dialog({
        autoOpen: true,
        draggable: true,
        resizable: true,
        title: 'Dialog stack overflow HULK',
        modal: true,
        stack: true,
        height: ($(window).height() * 0.95),
        width: ($(window).width() * 0.9),

        buttons: {

            'Submit': function() {
                $Dialog_div.dialog('close');
            }

        }

    });

}

$('#ClickMe').click(fnOpenDialog);​

Answer 2

要在事件处理程序中真正关闭对话框，请使用：

$(this).closest('.ui-dialog-content').dialog('close');

它将遍历 DOM，从新加载的内容备份到原来的 div 中，现在有对话框包裹它。

我看不出您为实际注册事件而发布的代码有任何明显错误，但据我所知，这里根本不需要使用事件委托。

由于在.load 完成之前您不会执行注册，因此您可以在#mycloselink 上直接注册事件处理程序。