Question

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

我在SO上提到了以下帖子，因为它有无限的对话框弹出窗口，但我想将弹出窗口限制在2-3级：

Jquery UI modal dialogs

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

感谢所有帮助。谢谢。

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

jQuery - Nest Dialogs 3级

1 个答案: