jQuery - 嵌套对话框 3 个级别答案

【问题标题】：jQuery - Nest Dialogs 3 levelsjQuery - 嵌套对话框 3 个级别
【发布时间】：2011-11-01 18:27:06
【问题描述】：

我正在尝试嵌套 3 个对话框。我想要做的是向用户提供一个他可以点击的按钮。单击后，他会看到一个确认弹出窗口以继续执行该操作。他可以单击“取消”以恢复正常浏览网站，或单击“是，确认”启动另一个对话框，显示一些详细信息和 2 个按钮，即“打印”和“取消”。如果用户单击打印，它应该启动打印预览并从数据库中打印一些信息。如果他单击“取消”，另一个弹出窗口应该询问他是否真的要取消打印。如果他单击“是，取消打印”按钮，它应该关闭第三和第二个弹出窗口，从而将他带回第一个弹出窗口。我怎样才能实现这个功能。

我参考了关于 SO 的以下帖子，因为它有无限的对话框弹出窗口，但我想将弹出窗口限制为 2-3 级：

Jquery UI modal dialogs

如何在编码方面实现所要求的功能（因为我是 JS 编码的新手）？

感谢所有帮助。谢谢。

【问题讨论】：

标签： jquery dialog

【解决方案1】：

这是一个简单的示例，向您展示如何从另一个对话框调用新对话框。您必须根据自己的需要对其进行调整。您可以在这里尝试工作代码：http://jsbin.com/oyosiv

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
</head>
<body>
<button id="b1">Open Dialogbox</button>

<div id="d1" title="Dialog Box One" style="display: none">
    One!
</div>
<div id="d2" title="Dialog Box Two" style="display: none">
    Two!
</div>
<div id="d3" title="Dialog Box Three" style="display: none">
    Three!
</div>
</body>

<script>
$("#d1").dialog({
    autoOpen: false,
    modal: true,
    buttons: { 
      "Open Two": function() { $("#d2").dialog("open"); },
      "Cancel": function() { $(this).dialog("close"); } 
    }
});

$("#d2").dialog({
    autoOpen: false,
    modal: true,
    buttons: { 
      "Open Three": function() { $("#d3").dialog("open"); },
      "Cancel": function() { $(this).dialog("close"); } 
    }
});

$("#d3").dialog({
    autoOpen: false,
    modal: true,
    buttons: { 
      "Okay": function() { $(this).dialog("close"); } 
    }
});

$("#b1").click(function(){
    $("#d1").dialog("open");
});

</script>
</html>

【讨论】：

太棒了！！！为我工作！对此，我真的非常感激。接受并升级'pd。谢谢你uuuuuuu...