最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Automatically reposition Jquery SimpleModal to center of page when modal div is resized - Stack Overflow

programmeradmin2浏览0评论

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?

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?

Share Improve this question asked Jul 13, 2010 at 8:30 ObayObay 3,20516 gold badges57 silver badges80 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

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.

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)

This works for me:

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


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

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论