jQuery UI对话框显示不正确

我在开发的站点中使用jQuery UI 1.8.19和Twitter Bootstrap 2.0.3。我想显示一个模式对话框时，点击在删除，为此我做：jQuery UI对话框显示不正确

<div id="dialog-confirm" title="<?php echo lang("event:delete_confirm_title") ?>"> 
     <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><?php echo lang('event:delete_confirm_content') ?></p> 
</div>

而且JS触发事件是这一个：

$(function() { 
    $("#delete").click(function(){ 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height:140, 
      modal: true, 
      buttons: { 
       "<?php echo lang('event:delete') ?>": function() { 
        $(this).dialog("close"); 
       }, 
       "<?php echo lang('global:cancel_label') ?>": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    }); 
});

出于某种原因，模态对话框总是显示在页面的末尾，当它不应该是我认为，当我点击元素对话框出现，但页面瞬间重定向到我的主页，并不知道原因，因为我没有重定向在任何地方，也没有任何形式。对此有何建议或帮助？致以问候

来源

2012-04-25 ReynierPM

任何机会，你可以发布一个链接呢？我可以prolly帮助特鲁布尔拍摄这很快，如果你有它在网上 – SpYk3HH 2012-04-25 12:38:05

您应该添加style='display: none'到您的对话框的div，所以它不会在启动时显示。

然后，如果页面发送到家里，当你点击按钮，你可能想要检查什么类型的按钮#delete是，并完成它的功能return false如果它是一个提交例如，以避免正常的点击事件处理程序是推出：

$(function() { 
    $("#delete").click(function(e){ 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height:140, 
      modal: true, 
      buttons: { 
       "<?php echo lang('event:delete') ?>": function() { 
        $(this).dialog("close"); 
       }, 
       "<?php echo lang('global:cancel_label') ?>": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    e.preventDefault(); 
    }); 
});

编辑：改进根据斯科特建议

来源

2012-04-25 12:38:45

尼斯迈克尔，也许该页面被发送，因为我不写“返回假”现在它不发送任何。此外，我修正了样式：“display：none”，直到我点击不是按钮的按钮，而是使用Twitter Bootstrap作为按钮样式的HREF时，才显示DIV。非常感谢，并指出你的所有要点！ – ReynierPM 2012-04-25 12:47:40

我可能会将'e'传入函数并调用'e.preventDefault（）;'来防止点击操作而不是'return false'，因为它也会调用'e.stopPropogation（）;'来防止其他事件冒泡向上。 – 2012-04-25 12:50:38

嗯，你可以发布样本@Scott – ReynierPM 2012-04-25 12:53:05

这也发生在我身上。我所知道的只有一个原因。对话框CSS文件未被加载。

见我的SO问题：position:fixed breaks in IE9

来源

2012-04-25 12:34:40 Dutchie432

jQuery UI对话框显示不正确

回答

相关问题