UIダイアログモーダルウィンドウは2回目のクリックでモーダルウィンドウとして機能します

Question

Jquery UIダイアログに問題があります。最初にボタンをクリックするとダイアログが表示されますがモーダルダイアログでは表示されませんが、時間、それはボタンのクリックイベントのコード

<button class="ajax">open dialog</button> 

は、上記のコードに

をテストするには、このリンクを参照してください。ここでモーダルダイアログ

$('.ajax').live('click', function() 
{ 
    var url = "/home/test"; 
    var dialog = $("#dialog"); 

    $("#dialog").dialog({ 
     height: 140, 
     title:"Title", 
     modal: true 
    }); 


    if ($("#dialog").length == 0) 
    { 
     dialog = $('<div id="dialog"></div>').appendTo('body'); 
    } 
    $.ajax(
     { 
      url: url, 
      beforeSend: function (jqXHR, settings) 
      { 
       //show an animated gif 
      }, 
      complete: function (jqXHR, textStatus) 
      { 
       //hide the animated gif 
      }, 
      success: function (data, textStatus, jqXHR) 
      { 
       dialog.dialog().html(data); 
      }, 
      error: function (jqXHR, textStatus, errorThrown) 
      { 
       dialog.dialog().html("An error occured..."); 
      } 
     }); 

    return false; 
}); 

として正しくそれを表示します3210

Answer 1

ここで私はそれをやります。

1. あなたはそう#dialog要素がdialog.lengthで発見された場合は直接その後

2. チェックそれを使用する変数を宣言dialog。それが空の場合は、マークアップを作成してください

3. オプションをautoOpen: falseで初期化してください。このように、ダイアログは一度だけ初期化されますが、すべて非表示のままです。

4. ajaxコールバックでは、openメソッドを呼び出してdialog.dialog('open')というダイアログを表示します。副次的なこととして、ダイアログの内容を設定してから開く方がより論理的に思えます。

さらにリーディング：

• autoOpen option
• open method

ここで修正されたコードは次のとおり

var dialog = $("#dialog"); 

if (dialog.length == 0) { 

    dialog = $('<div id="dialog"></div>').appendTo('body'); 

    dialog.dialog({ 
     height: 140, 
     title: "Title", 
     modal: true, 
     autoOpen: false 
    }); 

} 

$.ajax({ 
    url: url, 
    ... 
    success: function(data, textStatus, jqXHR) { 
     dialog.html(data).dialog('open'); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { 
     dialog.html("An error occured...").dialog('open'); 
    } 
}); 

DEMO