jquery模态对话没有弹出

时间:2012-09-10 17:54:12

标签: php jquery ajax

我正在尝试创建一个在我的应用完成任务时出现的弹出式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>

3 个答案:

答案 0 :(得分:0)

您即将关闭文档。点击与live或on的绑定应该在文档准备好之内。现在,您的文档准备好在第一次隐藏后立即结束。这样,当点击事件被绑定时,很可能还没有加载对话框功能。

答案 1 :(得分:0)

这会弹出对话框

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

答案 2 :(得分:0)

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

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

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