Question about SimpleModal jQuery plugin — possibl

Question

my problem has to do with the SimpleModal jQuery plugin. I have no problem opening the modal window, but once it opens it stays where it is [centered] on the screen, however its contents are changing, making it taller and therefore no longer centered. Is there a simple way to realign it so it becomes centered again?

EDIT: I think it would help to explain my problem by showing two screenshots: before & after -- basically I am using jQuery's slideUp & slideDown functionality to hide the credit card form depending on whether the user is paying via cash/cheque or credit card. Obviously with the credit card fields the height of the container is increased.

I tried adding $("div#modal-element").setPosition() in a callback element of slideUp/slideDown but to no avail -- in fact setPosition() is throwing a JS error because apparently the function doesn't exist. I always tried adding the autoResize option and setting it to true.

Answer 1

If you are in one of the callbacks, you have access to all of the functions and properties - so you could call setPosition() to re-center the dialog. For example:

$(element).modal({
    onShow: function (dialog) {
        var modal = this;

        // do stuff and change the container dimensions

        modal.setPosition(); // re-center the container
    }
});

I haven't tested the code, but it should work.

HTH

Answer 2

Since the SimpleModal is rigged to handle re-centering on window resize, the simplest method would be to trigger that event. After your content changes, just call this:

$(window).resize();