php - jquery模态对话框没有弹出

Question

我正在尝试创建一个在我的应用程序完成任务时出现的弹出 div。ajax 任务完成后，我想删除弹出窗口。我一直在查看http://jqueryui.com/demos/dialog/#modal并尝试实施类似的解决方案。但我无法让我的 div 弹出。这是我创建 div 的代码：

<div id="progress-indicator">
    <img src="<?php echo base_url();?>assets/img/wip.gif" /> Please Wait...
</div>

然后稍后在页面上，我有一些 javascript 来隐藏 div，直到有人点击一个按钮：

$(document).ready(function(){
$('#progress-indicator').hide();
});


$('#saveData').live('click', function()  {
//$('#progress-indicator').show();
    $( "#progress-indicator" ).dialog({
    height: 140,
    modal: true
});
});

不幸的是，单击保存按钮时不会弹出窗口。如果您能告诉我哪里出错了，我将不胜感激。

谢谢！

编辑：
我知道按钮单击事件被触发，因为在尝试创建弹出 div 之前，我有一行让 div 在现有页面中可见。那行得通。例如，以下代码有效：

$(document).ready(function(){
$('#progress-indicator').hide();
});

$('#save').live('click', function()  {
$('#progress-indicator').show();
});

这段代码工作正常，除了我想要一个以页面为中心的弹出窗口。

编辑 2：顺便说一句，我还在 Firefox 中检查了 Web 开发人员控制台，没有生成错误消息。万一有帮助......另外，我包括jquery和jquery-ui：

<script src="assets/js/jquery-1.8.1.min.js" charset="utf-8"></script>
<script src="assets/js/jquery-ui-1.8.23.custom.min.js"></script>

Answer 1

这将弹出对话框

<div id="progress-indicator" style="display:none;">
 <img src="<?php echo base_url();?>assets/img/wip.gif" /> Please Wait...
</div>

(function ($) {
 $('#saveData').click(function()  {
 $( "#progress-indicator" ).dialog({
    height: 140,
    modal: true
    });
  });
})(jQuery);

Answer 2

您关闭文档准备得太早了。点击与 live 或 on 的绑定应该在文档中准备好。现在您的文档准备在第一次隐藏后立即结束。这样，当点击事件被绑定时，对话框函数很有可能尚未加载。

Answer 3

您需要在 click() 事件之前定义对话框。在点击中，您需要调用 open()。

$(document).ready(function(){
 $( "#progress-indicator" ).dialog({
    height: 140,
    modal: true
    });
$('#progress-indicator').hide();

$('#save').click( function()  {
$('#progress-indicator').dialog('open');   
});
});