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