Автоматически перемещать 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новые измерения (+2, если вы хотите следовать политике simplemodal)

Answer 3

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

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


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