Automatically reposition Jquery SimpleModal to center of page when modal div is resized

Question

I'm using the SimpleModal Jquery plugin and it works great!

However, there are times that the width and height of the modal div need to be changed, so I need the modal to automatically re-position itself in the center of the page. I found out that SimpleModal uses its setPosition() function to do this. It is automatically called when the modal is launched.

So I tried to call the said function when the modal div's dimensions change, but it doesn't work:

$('#mybutton').click(function() {
    //code here to resize the modal
    $.modal.impl.setPosition(); //doesn't work. note that at this point, the modal is still active (displayed)
});

Do you have any ideas?

Answer 1

When you make an element (let's call it theElement) into a modal, it will be wrapped by a div#simplemodal-container. div#simplemodal-container will get the same dimentions as theElement (in fact, it will be 2px higher/wider than theElement)

You don't say what element you are actually resizing, but I guess it's theElement. If that's the case, #simplemodal-container's dimentions aren't updated, and positioning it again will have no effect. You have to resize the container explicitly.

Therefore, after resizing and before positioning again, do this:

$("#simplemodal-container").css({height: newHeight, width: newWidth});

Here i assume newHeight and newWidth is theElement's new dimentions (+2 if you want to follow simplemodal's policy)

Answer 2

In the current version (1.3.5), you can re-position the dialog in the callback. For example:

$('#foo').modal({
    onShow: function (dialog) {
        var modal = this; // you now have access to the SimpleModal object

        // do stuff here

        // re-position
        modal.setPosition();
    }
});

I'm working on version 1.3.6 which will provide some convenience methods for these "utility" functions.