How can I create a div that looks like a jQuery dialog without using a dialog?

I am using knouckout js to write a wizard like interface. The system is work开发者_开发问答ing 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

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