jQuery UI：模式对话框“关闭”答案

【问题标题】：jQuery UI: model dialog 'close'jQuery UI：模式对话框“关闭”
【发布时间】：2013-01-20 06:53:52
【问题描述】：

我有 2 个 Razor 视图，其中一个在 jQuery UI 对话框中加载另一个。在对话框中加载的视图中；我正在打开另一个 jQuery UI 对话框来显示一条消息。

目标是在单击消息对话框Cancel 按钮时关闭两个对话框。

Razor 代码如下：

主视图

<button id="openModel" onclick="openModel()">

<div id="mainDialog" />

<script type="text/javascript">
    function openModel() {
        $('#mainDialog').dialog({
            open: function () {
                // loading "the secondary view in the model dialog"
                // url: controller-action url to load the second view
                $(this).load('url'); 
            }
        });
    }
</script>

对话框视图

<button id="messageOpener">Verify</button>

<div id="messageDialog" />

<script type="text/javascript">

    $(document).ready(function () {

        $("#messageOpener").click(function () {
            $("#messageDialog").dialog("open");
                return false;
        });

        $("#messageDialog").dialog({
            buttons: {
                Retry: function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    // **** ?? must close both dialogs. ****
                }                
            },
            autoOpen: false,
        });
    });

</script>

我尝试了以下方法来关闭对话框：

方法 01：

$(".ui-dialog-content").dialog("close");

方法 02：

$(this).dialog("close");
$("#mainDialog").dialog("close");

方法 03：

$(".ui-dialog:visible").find(".dialog").dialog("close");

但以上所有内容都没有按预期关闭对话框，而是产生以下 JS 错误：

未捕获的错误：无法在初始化之前调用对话框上的方法；试图调用方法“关闭”
v.extend.error
（匿名函数）
v.extend.each
v.fn.v.each
e.fn.(匿名函数)
$.dialog.buttons.Cancel
r.click
v.event.dispatch
o.handle.u

【问题讨论】：

当你在消息对话框关闭时输入$("#mainDialog").dialog("close");会发生什么？方法 2 看起来不错
@vimalnath，谢谢。是的，$("#mainDialog").dialog("close"); 关闭了 messageDialog 而不是 mainDialog 也给出了同样的错误。
您是否尝试过提前定义模态（即 var firstDialog = $("#messageDialog").dialog({autoOpen: false, ...}); 第二个和随意关闭它们，因为您可以同时访问它们。
另一种方法是在第一个模态关闭时自动关闭第二个模态。即 var firstModal = $('#mainDialog').dialog({close: function(){ /* 关闭第二个模态方法调用 */}});
@DennisRongo，谢谢。您能否用更详细的代码 sn-p 详细说明您的第一篇文章。根据您的第二篇文章：假设我正确理解您；不，两个对话框必须仅在单击取消按钮时关闭，而不必在最后一个对话框关闭时关闭。

标签： javascript jquery asp.net-mvc jquery-ui razor

【解决方案1】：

按照如下方式重写代码解决问题..

1.主视图

<button id="openModel" onclick="openModel()">

<div id="mainDialog" />

<script type="text/javascript">

    var $modelDialog = $('#mainDialog').dialog({
        autoOpen: false,
        open: function () {
            // loading "the secondary view in the model dialog"
            // url: controller-action url to load the second view
            $(this).load('url'); 
        }
    });

    function openModel() {
        $modelDialog.dialog('open');    
    }

    function closeModel() {
        $modelDialog.dialog('close');    
    }

</script>

2。对话框视图

<button id="messageOpener">Verify</button>

<div id="messageDialog" />

<script type="text/javascript">

    var $messageDialog;

    $(document).ready(function () {

        $("#messageOpener").click(function () {
            $messageDialog.dialog("open");
                return false;
        });

        $messageDialog = $("#messageDialog").dialog({
            buttons: {
                Retry: function () {
                    $messageDialog.dialog("close");
                },
                Cancel: function () {
                    // [!!]
                    $messageDialog.dialog("destroy");
                    closeModel();
                }                
            },
            autoOpen: false,
        });
    });

</script>

【讨论】：

【解决方案2】：

方法 2 看起来不错，但是当您尝试关闭 message 对话框时，您会收到该错误，因为未打开 mainDialog 模式。此外，函数openModel 不会在任何地方被调用。

【讨论】：

谢谢。但是openModel() 函数在<button id="openModel" onclick="openModel()"> 中被调用。请参阅主视图。此外，messageDialog 通过mainDialog 打开，因此mainDialog 在messageDialog 出现时打开。