CODEWITHSUNDEEP
javascriptjqueryjquery-pluginssimplemodal
Obay
Obay

Reputation: 3205

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?

Upvotes: 2

Views: 4523

Answers (3)

Sebastian
Sebastian

Reputation: 2279

This works for me:

var modal = $.modal("<div>...</div>");


$('#mybutton').click(function() {
    //code here to resize the modal
    modal.setPosition();
});

Upvotes: 1

Eric Martin
Eric Martin

Reputation: 2841

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.

Upvotes: 4

Simen Echholt
Simen Echholt

Reputation: 11293

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)

Upvotes: 3

Related Questions