javascript - 为什么第二个对话打不开？

Question

我想使用 jquery UI 对话框创建一些带有额外信息的弹出窗口。

http://api.jqueryui.com/dialog/

如果我添加一个对话它有效，但我添加的第二个对话似乎不起作用。

我尝试了一些东西，但我一定忽略了一些东西。

为了测试它，我还修改了 Jquery UI 的示例文件，并且第二个对话也没有出现。

有人能给我一些好的建议吗？

原始文件可以从http://jqueryui.com/download/下载

$("#dialog").dialog({
  autoOpen: false,
  width: 400,
  buttons: [{
    text: "Ok",
    click: function() {
      $(this).dialog("close");
    }
  }, {
    text: "Cancel",
    click: function() {
      $(this).dialog("close");
    }
  }]
});

// Link to open the dialog
$("#dialog-link").click(function(event) {
  $("#dialog").dialog("open");
  event.preventDefault();
});

$("#dialog2").dialog({
  autoOpen: false,
  width: 400,
  buttons: [{
    text: "Ok",
    click: function() {
      $(this).dialog("close");
    }
  }, {
    text: "Cancel",
    click: function() {
      $(this).dialog("close");
    }
  }]
});

// Link to open the dialog
$("#dialog-link2").click(function(event) {
  $("#dialog2").dialog("open");
  event.preventDefault();
});

body {
  font: 62.5%"Trebuchet MS", sans-serif;
  margin: 50px;
}
.demoHeaders {
  margin-top: 2em;
}
#dialog-link {
  padding: .4em 1em .4em 20px;
  text-decoration: none;
  position: relative;
}
#dialog-link span.ui-icon {
  margin: 0 5px 0 0;
  position: absolute;
  left: .2em;
  top: 50%;
  margin-top: -8px;
}
#icons {
  margin: 0;
  padding: 0;
}
#icons li {
  margin: 2px;
  position: relative;
  padding: 4px 0;
  cursor: pointer;
  float: left;
  list-style: none;
}
#icons span.ui-icon {
  float: left;
  margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
  position: absolute;
}
select {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css" rel="stylesheet"/>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<h2 class="demoHeaders">Dialog</h2>
<p><a href="#" id="dialog-link" class="ui-state-default ui-corner-all"><span  class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
</p>

<h2 class="demoHeaders">Dialog2</h2>
<p><a href="#" id="dialog-link2" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
</p>

<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
  <p>number 1</p>
</div>

<!-- ui-dialog -->
<div id="dialog1" title="Dialog Title">
  <p>number 2</p>
</div>

Answer 1

无需添加第二个对话框 - 只需使用 $('#divID').html() 更改现有对话框中的内容即可。

您确实需要两个触发器、两个按钮——但您可以只使用一个对话框来显示两个充满对话框的内容。这是一个例子:

$('#dlgDIV').dialog({
      autoOpen: false,
      height: 200,
      width: 350,
      modal: true
});

$('#mybutt').click(function(){
   $('#dlgDIV').html('Here is some stuff').dialog('open');
});

$('#yrbutt').click(function(){
   $('#dlgDIV').html('\
    <div class="wow">And some other stuff</div>\
    <div><img src="http://placekitten.com/100/100" /></div>\
  ').dialog('open');
});

.wow{font-size:2rem;color:purple;margin:20px;border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css" rel="stylesheet"/>

<div id="dlgDIV"></div>

<button id="mybutt">Click Me</button>
<button id="yrbutt">Click Me Next</button>

感谢 Andrew L 协助改进答案。