Question

我在我正在开发的网站中使用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" );
                }
            }
        });
    });
});

出于某种原因，模式对话框始终显示在页面的末尾，当我不应该这样时，当我单击元素时，对话框会出现，但页面会立即重定向到我的主页并且不知道原因是因为我没有在任何地方重定向，也没有形式。对此有何建议或帮助？最好的问候

Answer 1

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

编辑：根据斯科特的建议完成修改

Answer 2

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

请参阅我的问题：position:fixed breaks in IE9

jQuery UI对话框无法正确显示

2 个答案: