javascript - 多级 jQuery 对话框

Question

我正在尝试使用模态行为实现多级 jQuery Dialog。我有一个主页，它打开了第一个对话框，从那里可以打开第二个对话框，所有这两个对话框都应该是模态框。

第一个问题是我在单击主页链接时遇到 fiddle 错误，第二个问题是它没有按要求创建对话框。

Fiddle

Answer 1

发生了一堆事情:

1. 在 jsFiddle 中，您需要添加 jQuery UI 和主题作为外部资源。仅选择 jQuery 库是不够的。 jQuery UI 对话框是 jQuery UI 库的一部分，而不是 jQuery 核心库的一部分。

2. 因为您的点击事件发生在 <a> 上标签，您需要取消它们的默认行为。为您的 <a> 创建一个点击处理程序标记，并在执行任何其他操作之前先取消默认行为:

   <a href="#" id="clickForGold">Gold</a>
   
   $("#clickForGold").on("click", function(e) {
     e.preventDefault();   <--- this stops the link from navigating
     //now do other stuff
   });
   

3. 在页面加载时设置对话框，然后在需要时打开它们。使用 autoOpen:false参数以防止它们在页面加载时打开。按如下方式打开它们:

   $("dialog-id").dialog("open");
   

4. 不要在模式上打开模式。它的可用性非常差。在打开第二个之前关闭第一个:

   function clickForSecond() {
     $("dialog-id-first").dialog("close");
     $("dialog-id-second").dialog("open");
   }
   

一个工作示例: https://jsfiddle.net/5ucat3f7/1/