Автоматически перемещать Jquery SimpleModal в центр страницы при изменении размера модального div

Question

Я использую плагин SimpleModal Jquery, и он прекрасно работает!

Однако бывают случаи, когда необходимо изменить ширину и высоту модального div, поэтому мне нужно, чтобы модал автоматическипозиционировать себя в центре страницы.Я обнаружил, что SimpleModal использует для этого функцию setPosition ().Он автоматически вызывается при запуске модала.

Поэтому я попытался вызвать указанную функцию при изменении размеров модального div, но она не работает:

$('#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)
});

Есть ли у васесть идеи?

Answer 1

В текущей версии (1.3.5) вы можете переместить диалоговое окно в обратный вызов. Например:

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

        // do stuff here

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

Я работаю над версией 1.3.6, которая предоставит несколько удобных методов для этих "служебных" функций.

Answer 2

Когда вы превращаете элемент (назовем его theElement) в модальный, он будет заключен в div#simplemodal-container.div#simplemodal-container получит те же размеры, что и theElement (на самом деле, оно будет в 2 раза больше / шире, чем theElement)

Вы не говорите, какой элемент вы на самом деле изменяете, но я думаю,theElement.Если это так, то размеры #simplemodal-container не обновляются, и повторное позиционирование не будет иметь никакого эффекта.Вы должны явно изменить размер контейнера.

Поэтому, после изменения размера и перед повторным позиционированием, сделайте следующее:

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

Здесь я предполагаю newHeight, а newWidth равно theElement 's новые измерения (+2, если вы хотите следовать политике simplemodal)

Answer 3

Это работает для меня:

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


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