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

Question

I am using knouckout js to write a wizard like interface. The system is working well, except that I need to have each page/step appear in a dialog. The jQuery dialog is used elsewhere in the system, and has the styling that is needed, buttons, etc.

The intent is to have the data template bound to that div (or be able to change the content of the div) without calling dialog(). The reason is that it is a hassle to get MVVM working with methods in this style.

Is there a good way to do this?

Thanks, Erick

Answer 1

you can use jquery ui classes on regular elements to get the jquery ui styles.

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

it wont be draggable or resizeable and the close button won't work or rollover without you adding those behaviors manually