jQuery对话框根据html显示

Question

JQuery $('#dialog').html(htmlContent) 将 html 显示为对话框的主体。 我想像 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

这可能会达到你想要达到的效果：

$("#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 );

当然，你需要用一些 CSS 来修饰它。