1

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

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

由于某种原因，模式对话框总是显示在页面末尾，而我认为它不应该显示，当我单击元素时，对话框出现，但页面立即重定向到我的主页并且不知道原因，因为我在任何地方都没有重定向，也没有表格。对此有何建议或帮助？最好的祝福

4

2 回答 2

2

您应该添加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();
    });
});

编辑：根据 Scott 的建议进行修改

于 2012-04-25T12:38:45.743 回答
1

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

请参阅我的 SO 问题：位置：IE9 中的固定中断

于 2012-04-25T12:34:40.073 回答