Question

<div id="modal" style="display: none;">loading...</div>
<a href="#" class="ajax">click me</a>

$('.ajax').on('click', function() {
    $.ajax({
        url: '/',
        beforeSend: function() {
            $('#modal').dialog({
                modal: true,
                width: 100,
                height: 100
            });
        },
        success: function(data) {
            $('#modal').html('new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value ');
        }
    });
    return false;
});

https://jsfiddle.net/wrd7xr5m/

如何在success中使用带有恢复宽度\高度的相同对话框和新内容？在实际项目中我使用它：

$('#modal').html(data)

Answer 1

您可以使用相同的jquery对象$('#modal')。您只需要通过调用dialog方法再次设置所需的配置值。

 $('#modal').dialog( "option", "width", 500 )
        .dialog( "option", "height", 300 )
        .html('new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value ');

https://jsfiddle.net/wrd7xr5m/2/

Answer 2

为什么不使用函数？

 $('.ajax').on('click', function() {
        $.ajax({
            url: '/',
            beforeSend: openDialog(),
            success: openDialog({width:600px})
        });
        return false;
    });

   function openDialog(setting){
            var defaultSetting = { 
                modal:true, 
                height: 400, 
                width: 450
            }
            //if you have any custom setting then pass object
            if(setting!=undefined)
               $.extend(defaultSetting ,setting);

            var myDialog= $('#modal').dialog(defaultSetting);
}

Answer 3

另一个好方法是获取dialog的对象引用，然后在代码中的任何位置使用它。您可以使用.dialog("option", "<attribute>", <value>);表示法覆盖/定义属性值。

例如：

myDialogObject.dialog("option", "position", {my:"left top", at:"left bottom", of:window});

使用对象引用

$(document).ready(function(){
    //1. Initialize the dialog with 'autoOpen' attribute set to false.
    var myDialogObj = $('#modal').dialog({
        autoOpen: false,
        modal: true,
        width: 100,
        height: 100
    });

    //2. Make your async call.
    $('.ajax').on('click', function() {
        $.ajax({
            url: '/',
            beforeSend: function() {
                //open the dialog using object reference.
                myDialogObj.dialog('open');
            },
            success: function(data) {
                myDialogObj.html('new value for the dialog, could also have a page content loaded dynamically using the ".load(url,successCallback(){})" function.');
                //set the height and width as per your custom requirement or leave it, if you want auto adjustments.
                myDialogObj.dialog("option", "width", 340);
                myDialogObj.dialog("option", "height", 200);
                //open the dialog using object reference.
                myDialogObj.dialog('open');
            }
        });
        return false;
    });
});

尝试小提琴here。

参考文献：

https://api.jqueryui.com/dialog

jQuery对话框加载内容

3 个答案:

使用对象引用