jQuery UI Dialogでもう一度ポップアップさせるには？

Question

jQueryダイアログボックスに問題が起きたので質問させて頂きます。
問題は、ダイアログボックスを閉じた後にリンクをクリックして起動すると、ページを更新しないかぎりもう一度ポップアップしません。
更新しなくてもポップアップするようにするにはどうすればいいでしょうか?

$(document).ready(function() {
$('#div_id').click(function()
{
$('#button').css('display','inline');
$('#button').dialog({
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog("close"); } },
close: function(ev, ui) { $(this).remove(); },
}); 
});
});

このコードに問題はないでしょうか?
回答よろしくお願いします。

Answer 1

Dialog Widgetの生成と表示のタイミングを分割することでも対応可能です。
Dialog WidgetのautoOpenオプションとopen()メソッドを使用します。

<button id="trigger">trigger</button>
<p id="dialog">dialogcontent</p>

var trigger = $('#trigger');
var dialog = $("#dialog");

$(function() {
    //Dialog Widgetの生成
    dialog.dialog({
        //autoOpenオプションをfalseにすることで、
        //ダイアログを開かずにdomのみ生成できます。
        autoOpen: false
    });

    trigger.on('click', function() {
        //トリガーとなる要素をクリックした際に生成済みのダイアログを表示します。
        dialog.dialog('open');
    });
});

提示されているコードにhtml部分がなかったので、最小コードを試作させていただきました。
上記コードをご参考に、ご自分のコードにあてはめてみていただければ。。。

Comments

[endlesscoding]

親切な回答ありがとうございました！参考にさせていただこうと思いいます！

Answer 2

close関数の変わりにdestroyを使えばOKです。

$(document).ready(function() {
$('#button').click(function(){
$('#div_id').css('display','inline');
$('#div_id').dialog({
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog("destroy"); } },
close: function(ev, ui) { $(this).remove(); },
});
return false;
});
});

このコードを使ってみてください。