Question

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

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

如果我添加一个对话框就可以了，但我添加的第二个对话框似乎不起作用。

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

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

有人对我有一些好的建议吗？

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

下载

＆＃13;

$("#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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

你做需要两个触发器，两个按钮 - 但你可以只使用一个对话框来显示两个对话框内容。这是一个例子：

＆＃13;

$('#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');
});

＆＃13;

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

＆＃13;

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

＆＃13;

感谢Andrew L协助改进答案。

为什么第二次对话没有开放？

1 个答案: