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

【问题标题】：How can I create a div that looks like a jQuery dialog without using a dialog?如何在不使用对话框的情况下创建一个看起来像 jQuery 对话框的 div？
【发布时间】：2011-11-21 09:45:27
【问题描述】：

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

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

有什么好办法吗？

谢谢，埃里克

【问题讨论】：

那么您是否真的需要在不使用 jQuery 对话框的情况下执行此操作，或者您只是想为对话框向导提供单独的颜色/样式方案？如果是后者，您可以简单地在您的向导中使用不同的 css。

标签： jquery jquery-ui mvvm knockout.js

【解决方案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>

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

【讨论】：