jquery对话框，使用自定义html元素作为标题

Question

我有一个HTML表单，我想在我的网站中多次使用，所以它被打包在一个视图中，每次我想使用它时，我加载相同的视图。有时我正在使用它作为模式工作的jquery dialog widget。

由于我已经在我的表单中定义了一个标题，我想用它作为对话框标题栏，默认情况下替换它。不过，我想保留默认功能：关闭按钮和可拖动的事实。

原始的HTML

<div id="form-info"> 
    <p class="title">The title</p> 
    <form> 
     <!--the form--> 
    </form> 
</div> 

jQuery的dialog()后的HTML运行

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
    <span id="ui-id-1" class="ui-dialog-title">&nbsp;</span> 
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"> 
    <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span></button> 
</div> 
<div id="form-info" class="ui-dialog-content ui-widget-content"> 
    <p class="title">The title</p> 
    <form> 
     <!--the form--> 
    </form> 
</div> 

我想什么才达到：

<div id="form-info" class="ui-dialog-content ui-widget-content"> 
    <p class="title ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
     The title 
     <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"></button> 
    </p> 
    <form> 
     <!--the form--> 
    </form> 
</div> 

span的ui-dialog-titlebar内标签是可选的，我不需要他们，但我不在乎如果jQu ery把它们放在那里。

我发现很多Q &关于隐藏标题，用CSS定制它，隐藏关闭按钮......但没有什么比这个更像。

Answer 1

，如果你不需要在其他地方的段落，你可以只改变您的标记

<div id="form-info" title="The title"> 
<form> 
    <!--the form--> 
</form> 
</div> 

，或者如果你需要它，你可以在你的对话框的开放式事件这样

期间移动称号

$("div#form-info").dialog({ 
    autoOpen: true, 
    open: function() { 
      var $formTitle = $("p.title", this); 
      $(this).prev().find(".ui-dialog-title").text($formTitle.text()); 
      $formTitle.remove(); 
    } 
}); 

的工作示例看到这个JSFiddle