UI对话框模态窗口在第二次点击时作为模态窗口工作

我有Jquery UI对话框的问题，当我第一次点击按钮时，它确实显示对话框但不在模态对话框中，但是当您单击它时第二次时间，它正确地显示它作为一个模式对话框UI对话框模态窗口在第二次点击时作为模态窗口工作

$('.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; 
});

这里是按钮点击事件

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

看到这个链接来测试上面的代码

代码3210

来源

2012-02-20 Moe9977

请您在这里看到功能代码[链接]（http://jsfiddle.net/jRPfu/13/） – Moe9977 2012-02-20 02:33:26

这是我该怎么做的。

声明变量dialog所以后来
检查直接使用它，如果一个#dialog元素与dialog.length发现。如果它为空，请创建标记
用选项autoOpen: false初始化对话框。这样，对话框就会一劳永逸地初始化，但它仍然保持隐藏状态。
在您的ajax回调函数中，调用open方法以显示对话框dialog.dialog('open')。作为一个方面说明，设置对话框的内容然后打开它似乎更具逻辑性。

进一步阅读：

这里的修改后的代码：

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

来源

2012-02-21 11:40:45

完美，它工作的很棒，感谢您的阐述 – Moe9977 2012-02-23 03:50:57

UI对话框模态窗口在第二次点击时作为模态窗口工作

回答

相关问题