jquery - 如何在不使用对话框的情况下创建一个看起来像 jQuery 对话框的 div？

Question

我正在使用 knouckout js 编写类似界面的向导。系统运行良好，除了我需要让每个页面/步骤出现在对话框中。 jQuery 对话框在系统的其他地方使用，并具有所需的样式、按钮等。

目的是将数据模板绑定(bind)到该 div(或能够更改 div 的内容)而不调用 dialog()。原因是让 MVVM 使用这种风格的方法很麻烦。

有没有好的方法来做到这一点？

谢谢，
埃里克

Answer 1

您可以在常规元素上使用 jquery ui 类来获取 jquery ui 样式。

<div class="ui-widget ui-widget-content ui-corner-all">
  <div class="ui-widget-header ui-corner-all">
    <span id="ui-dialog-title-dialog" class="ui-dialog-title">Panel title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-widget-content">
      <p>panel content goes here.</p>
   </div>
</div>

如果您不手动添加这些行为，它将无法拖动或调整大小，并且关闭按钮将无法工作或翻转