Question

我有以下模态对话框点击功能

 $("#foo").click(function(){$("#bar").dialog({

    width: 400,
    modal: true,
    resizable: false,
    buttons:{
            "Save": function(){
                        $.post('remote_foo.php', $('#waka').serialize(), function(data){
                    $('#list').html(data);})
                    $(this).dialog("close");
                    $('.dial').val('');
                    $('.url').val('http://');

                    },


            "cancel": function(){
                $(this).dialog("close");
            }
        }//end of buttons
    }).('open');//end of jquery dialog
})// end of click function

它在Firefox中工作正常但说实话我甚至不认为我的点击功能设置正确。

1）这是通过点击打开对话框的正确方法。 2）是否有一个特定的原因，这在chrome / Internet Explorer中不起作用？（这是jquery ui）

Answer 1

不，这不是你打开对话框的方式。请看一下这个：

$(function () {

$("#foo").click(function(){
  $("#bar").dialog('open');
});


$("#bar").dialog({
    autoOpen: false,
    width: 400,
    modal: true,
    resizable: false,
    buttons:{
            "Save": function(){
                        $.post('remote_foo.php', $('#waka').serialize(), function(data){
                    $('#list').html(data);})
                    $(this).dialog("close");
                    $('.dial').val('');
                    $('.url').val('http://');

                    },


            "cancel": function(){
                $(this).dialog("close");
            }
        }//end of buttons
    }); // end of dialogInit


})// end of document ready

基本上，您每次点击都会重新初始化对话框。而是在文档就绪时初始化一次，然后使用您的点击事件打开/关闭它。

对DOM对象的对话框设置调用只需要调用一次，以便为各种与jQuery UI相关的任务准备该对象。一旦准备好，你就可以使用.dialog（'open'）和.dialog（'close'），每次都会保持配置。

Answer 2

您是否尝试在对话通话结束时删除。（'open'）？这不应该是必需的（不确定它是否是有效的调用）来显示对话框，可能是您的跨浏览器问题的根源。

模板对话框在chrome / explorer中不起作用但在Firefox中仍然有效

2 个答案: