jquery-ui - jQuery对话框根据html显示

Question

JQuery $('#dialog').html(htmlContent)将 html 显示为对话框的 body 。我想像 twitter bootstrap modal approach 一样显示它。例如：

<div class="ui-dialog-titlebar ui-widget-header">
          some content...            
</div>
<div class='ui-dialog-content ui-widget-content'>
          some content...           
</div>

现在，在显示对话框时，'title-bar' div 内容应该显示在对话框的标题标题中，并且 diloag 正文应该显示 'ui-dialog-content' div 内容。那么有没有办法用这种方法显示对话..

Answer 1

This might do what you're trying to achieve:

$("#dialog").remove(); // Remove any existing dialog
var $html = '<div id="dialog"><div class="ui-dialog-titlebar ui-widget-header">' + headerContent + '</div>' +
'<div class="ui-dialog-content ui-widget-content">' + htmlContent + '</div></div>';
// Append modal HTML to the page
$("body").append( $html );

You'll need to dress it up with some CSS of course.