jQuery SimpleModel在AJAX请求后调整大小

jQuery SimpleModel在AJAX请求后调整大小,jquery,simplemodal,Jquery,Simplemodal,我正在使用SimpleModel插件在站点上显示一个对话框。在该对话框中,我有两个链接将执行AJAX请求,来自这些请求的响应将替换对话框的当前内容。我正试图使事情尽可能灵活,这样,如果我希望以后能够将不同的响应加载到对话框中,它就会正常工作 在一个函数中,我打开对话框: $('div.modal').modal( { minWidth: width, minHeight: height, onOpen: modal_onOpen, onClose: modal_o

我正在使用SimpleModel插件在站点上显示一个对话框。在该对话框中,我有两个链接将执行AJAX请求,来自这些请求的响应将替换对话框的当前内容。我正试图使事情尽可能灵活,这样,如果我希望以后能够将不同的响应加载到对话框中,它就会正常工作

在一个函数中,我打开对话框:

$('div.modal').modal(
{
    minWidth: width,
    minHeight: height,
    onOpen: modal_onOpen,
    onClose: modal_onClose
});
onClose回调如下所示:


function modal_onClose(dialog)
{
    dialog.container.fadeOut('slow', function()
    {
        dialog.data.hide();

        if(reload_dialog)
        {
            data = ajax_page_load(reload_url, false, false);

            if(data.statusText == 'OK')
            {
                dialog.container.width(reload_width);
                dialog.container.height(reload_height);
                $.modal.setPosition();

                $('div.modal div.container').html(data.responseText);
                dialog.data.show();
                dialog.container.fadeIn('slow', function()
                {
                    $('a.simplemodal-close').bind('click', function()
                    {
                        $.modal.close();
                    });
                });
            }

            reload_dialog = false;
        }
        else
        {
            dialog.overlay.slideUp('slow', function()
            {
                $.modal.close();
            });
        }
    });
}
当我想将新内容加载到对话框中时,我有以下内容:


var reload_dialog = false;
var reload_url;
var reload_width;
var reload_height;

function load_dialog(url, width, height)
{
    reload_dialog = true;

    reload_url = url;
    reload_width = width;
    reload_height = height;

    $.modal.close();
}
现在,上面的所有代码都是函数。但我担心我已经克服了复杂的事情。原因如下:

在modal_onClose中,我被迫将close处理程序重新绑定到对话框内部的锚。如果我没有绑定到那里,我就无法在AJAX请求之后关闭对话框,即使锚定标记正确地显示在对话框内部。同样,在绑定锚定标记后,它会运行,但会忽略我设置的onClose动画

由于所有这些,我觉得我没有采取最好的方法来解决问题

有人完成过类似的工作吗?有什么建议吗


提前谢谢,我知道这里有很多信息:)

我解决了这个问题,所以我想我会给其他人留下一个回复

基本上,我的问题归结为在不应该调用$.modal.close()时调用$.modal.close()

最初,当我想重新加载对话框时,我调用了$.modal.close()并在onClose()回调中执行了重新加载。通过调用$.modal.close(),似乎我正在剥离close事件处理程序,因此,当我重新加载对话框时,情况就不一样了

为了解决这个问题,我从onClose()回调中删除了重新加载请求,只处理了常规函数中的所有内容。当我使用回调时,我使用返回的对话框对象来执行动画。使用这种新方法,我可以通过以$(“#simplemodal container”)为目标来实现相同的结果

TL;DR-下面的代码允许我通过AJAX将新数据加载到打开的对话框中,同时还可以重新调整对话框的大小和位置

打开对话框的代码:


function pop_dialog(url, width, height)
{
    $('div.modal').modal(
    {
        minWidth: width,
        minHeight: height,
        onOpen: function(dialog)
        {
            //Animate the overlay
            dialog.overlay.slideDown('slow', function () 
            {
                //Make sure the contents of the dialog are showing
                dialog.data.show();

                //Preload
                $('.dialog-preloader').show();
                $('div.modal img.logo').show();

                //Fade in preloader display and perform AJAX request
                dialog.container.fadeIn('fast', function()
                {
                    data = ajax_page_load(url, false, false);

                    //On success, show dialog contents
                    if(data.statusText == 'OK')
                    {
                        $('div.modal div.container').html(data.responseText);
                        $('.dialog-preloader').hide();
                    }
                });
            });
        },
        onClose: function(dialog)
        {
            //Fade out the dialog
            dialog.container.fadeOut('slow', function()
            {
                //If we're closing the dialog, animate the overlay off.
                dialog.overlay.slideUp('slow', function()
                {
                    //Clean up the mess.
                    $.modal.close();
                });
            });
        }
    });
}
“重新加载”对话框的代码


function load_dialog(url, width, height)
{
    //Hide the dialog
    $('#simplemodal-container').fadeOut('slow', function()
    {
        //Hide the dialog contents and show preloader
        $('div.modal div.container').hide()
        $('.dialog-preloader').show();

        //Set the new width
        $('#simplemodal-container').width(width);
        $('#simplemodal-container').height(height);
        $.modal.setPosition();

        //Fade container back in with preload message
        $('#simplemodal-container').fadeIn('slow', function()
        {
            //Perform AJAX request to load new dialog
            data = ajax_page_load(url, false, false);

            //On success, show dialog contents
            if(data.statusText == 'OK')
            {
                $('div.modal div.container').html(data.responseText);
                $('.dialog-preloader').hide();
                $('div.modal div.container').show();
            }
        });
    });
}
   $(".aModal5").click(function (e) {
            e.preventDefault();


            $.modal("<div>Loading...</div>", {
                closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",

                onShow: show,
                overlayId: 'simplemodal-overlay',
                containerId: 'simplemodal-container',



            });

        });
 function show(dialog) {
        $('#simplemodal-container').height('30px');
        $('#simplemodal-container').width('30px');
        xAjax.postWithLoadTarget("Default.aspx/test", null,
        $(".divtest"), function (data) {

            $('#simplemodal-container .simplemodal-data').fadeOut(200, function () {

                var $this = $(this);

                $('#simplemodal-container').animate({ height: 200 }, function () {
                    $('#simplemodal-container .simplemodal-data').html(data.d);
                    $this.fadeIn(200, function () {

                    });

                });


            });


        });

    }