Question

我正在使用SimpleModal插件在网站上显示对话框。在该对话框中，我有两个将执行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中，我被迫将关闭处理程序重新绑定到对话框内的锚点。如果我没有绑定那里，即使锚点标签在对话框内正确显示，我也无法在AJAX请求之后关闭对话框。此外，在绑定锚标签后，它会起作用但忽略我设置的onClose动画。

由于这一切，我感觉我没有采用最佳解决方案。

有没有人完成类似的事情？有什么提示吗？

先谢谢，我知道这里有很多信息：）

Answer 1

我解决了这个问题，所以我想我会留下任何其他人的回复。

基本上我的问题归结为调用$ .modal.close（），当我不应该这样做。

最初，当我想重新加载对话框时，我调用了$ .modal.close（）并在onClose（）回调中执行了重新加载。通过调用$ .modal.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();
            }
        });
    });
}

Answer 2

   $(".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',



            });

        });

show函数应该处理加载，一旦完成ajax请求，它将调整窗口的大小：

 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 () {

                    });

                });


            });


        });

    }

jQuery SimpleModal在AJAX请求后调整大小

2 个答案: