Javascript jqueryui:model对话框'；关闭'；

我有两个Razor视图，其中一个在jQueryUI对话框中加载另一个。在对话框中加载的视图中；我正在打开另一个jQueryUI对话框以显示消息

目标是在单击消息对话框<代码>取消按钮时关闭两个对话框

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>

方法02:

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

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

方法03:

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

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

但上述所有操作并没有按预期关闭对话框，而是产生以下JS错误：

未捕获错误：无法在初始化之前调用对话框上的方法；试图调用方法“close”
v、 扩展。错误
（匿名功能）
v、 扩展。每个
v、 fn.v.每个
e、 fn.（匿名函数）
$.dialog.buttons.Cancel
r、 单击
v、 事件调度
o、 处理

---

方法2看起来不错，但您得到了错误，这是因为当您尝试关闭

消息

对话框时，

main对话框

模式未打开。此外，函数

openModel

不会在任何地方被调用。

用以下方法重新编写代码以解决问题

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>

<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>

var$modelDialog=$（'#mainDialog'）。对话框({
自动打开：错误，
打开：函数（）{
//正在加载“模型对话框中的次视图”
//url：加载第二个视图的控制器操作url
$（this.load（'url'）；
}
});
函数openModel（）{
$modelDialog.dialog（'open'）；
}
函数模型（）{
$modelDialog.dialog（'close'）；
}

2。对话框视图

<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>

<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>

验证
var$messageDialog；
$（文档）.ready（函数（）{
$（“#messageOpener”）。单击（函数（）{
$messageDialog.dialog（“打开”）；
返回false；
});
$messageDialog=$（“#messageDialog”）.dialog({
按钮：{
重试：函数（）{
$messageDialog.dialog（“关闭”）；
},
取消：函数（）{
// [!!]
$messageDialog.dialog（“销毁”）；
closeModel（）；
}                
},
自动打开：错误，
});
});

当您放入

$（“#mainDialog”）.dialog（“close”）消息对话框关闭时？方法2看起来不错though@vimalnath谢谢是，
$（“#主对话框”）.dialog（“关闭”）关闭messageDialog，但不关闭mainDialog。它也会给出相同的错误。您是否尝试提前定义模态（即var firstDialog=$（“#messageDialog”）。dialog（{autoOpen:false，…}）；第二个模式也是如此，因为您可以同时访问它们。另一种方法是在第一个模式关闭时自动关闭第二个模式。即var firstModal=$（'#mainlialog'）。dialog（{close:function（）{/*close第二个模式方法调用*/}）；@DennisRongo，谢谢。你能用更详细的代码片段详细阐述你的第一篇文章吗。根据你的第二篇文章：假设我理解你的意思；不，两个对话框只有在单击“取消”按钮时才能关闭，不一定在最后一个对话框关闭时才能关闭。谢谢。但是
openModel（）
函数在
中被调用。请参考主视图。进一步的
消息对话框
通过
Main对话框
打开，因此当出现
消息对话框
时，
Main对话框
打开。