Php jquery模态对话未弹出

我正在尝试创建一个弹出div，它在我的应用程序完成任务时出现。ajax任务完成后，我想删除弹出窗口。 我一直在审查并尝试实施类似的解决方案。但我无法让我的div弹出。下面是我创建div的代码：

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

不幸的是，单击“保存”按钮时不会出现弹出窗口。如果你能告诉我哪里出了问题，我将不胜感激

谢谢

编辑：
我知道button click事件被触发，因为在尝试创建弹出式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>

您关闭文档准备得太早了。click with live或on的绑定应在文档中准备就绪。现在，文档就绪将在第一次隐藏后立即结束。这样，当点击事件绑定时，对话框功能很有可能还没有加载。

这将弹出对话框

<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);

资产/img/wip.gif/>请稍候。。。
（函数（$）{
$（“#保存数据”）。单击（函数（）{
$（“#进度指示器”）。对话框({
身高：140，
莫代尔：对
});
});
})（jQuery）；

您需要在click（）事件之前定义对话框。在click中，您需要调用open（）

---

您能确认回调是否启动吗？我认为.live（）现在已不推荐使用。您是否尝试过.on（）？

。live（）

在jQuery 1.7+中已不推荐使用。最好使用

.on（）

.1.是的，你需要隐藏div，否则加载时它就放在你的页面上。但是我会使用css，而不是document ready中的javascript。如果你在document ready中这样做，你可能会在它隐藏之前短暂地看到它。@d4rklit3-我编辑了我的文章，以包含你正在寻找的信息。你能使用Firebug o吗r Chrome检查器，查看调用dialog（）时是否存在javascript错误是吗？如果这听起来有侮辱性，请原谅，但请仔细检查您的页面上是否包含了jquery和jquery UI，它们是不同的东西。您能给我更多的背景信息/解释吗？请参阅我的答案，您希望在加载对话函数之前等待绑定。我修改了文档，以便它可以n比较了所有jquery内容。行为相同。没有弹出窗口。我在Firefox中检查了web developer控制台，也没有错误。我只是尝试将其添加到文档中。准备好了，但没有解决我的问题。您能看到对话框吗？

<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);

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

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