jQueryUI的：對話框（）標題欄不改變

Question

見本小提琴：http://jsfiddle.net/590hbj9y/5/

點擊不同的按鈕產生不同的對話體，但對話框標題保持不變。我怎樣才能讓標題改變？

這是來自小提琴的代碼。 （會很好，如果StackOverflow上寫了這個自動進口！）

HTML

<section id="dialog" title="hi">Hello</section> 
<input type="button" msg="Sup" value="Say Sup"> 
<input type="button" msg="Yo" value="Say Yo"> 
<input type="button" msg="Foo" value="Say Foo"> 

JS

function showMessage(evt) { 
    var msg = $(evt.target).attr('msg'); 
    var dialog = $("#dialog"); 
    dialog.attr('title', "Showing " + msg); 
    dialog.text(msg); 
    dialog.dialog(); 
} 

$(function() { 
    $("input").click(showMessage); 
}); 

CSS

#dialog { 
    display: none; 
} 

Answer 1

您需要通過標題爲選項。

http://api.jqueryui.com/dialog/#option-title

function showMessage(evt) { 
 
    var msg = $(evt.target).attr('msg'); 
 
    var dialog = $("#dialog"); 
 
    dialog.text(msg); 
 
    dialog.dialog({ 
 
\t \t title: "Showing "+ msg 
 
\t }); 
 
} 
 

 
$(function() { 
 
    $("input").click(showMessage); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css"/> 
 

 
<section id="dialog" title="hi">Hello</section> 
 
<input type="button" msg="Sup" value="Say Sup"> 
 
<input type="button" msg="Yo" value="Say Yo"> 
 
<input type="button" msg="Foo" value="Say Foo">