Geek asks and answers

Resizing jQuery SimpleModal after an AJAX request

I use the SimpleModal plugin to display a dialog on a site. Inside this dialog, I have two links that will execute AJAX requests, and the response from these requests should replace the current contents of the dialog box. I try to keep everything as flexible as possible so that if I want to load various answers in the dialog box in the future, this will just work.

In one function, I open a dialog:

$('div.modal').modal(
{
    minWidth: width,
    minHeight: height,
    onOpen: modal_onOpen,
    onClose: modal_onClose
});

The onClose callback is as follows:


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();
            });
        }
    });
}

And when I want to load something new into the dialog, I have the following:


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();
}

Now all the functions are above code. But I am worried that I have a path to complex things. That's why:

modal_onClose . , AJAX, . , onClose, .

, .

- - ? ?

, , :)

+3
2

, , - .

$.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();
            }
        });
    });
}
+3
   $(".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 () {

                    });

                });


            });


        });

    }
0

More articles:


All Articles