Search code examples
javascriptjqueryjquery-pluginssimplemodal

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


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?


Solution

  • 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.