jQuery对话框加载内容

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/

How can I use the same dialog in success with restore width\height with new content? In real project I use this:

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

Answer 1

You can use the same jquery object $('#modal'). You just need to set again the configuration values you need by calling dialog method.

 $('#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/