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

Я использую плагин 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)
});

Есть ли у вас какие-либо идеи?


javascript jquery simplemodal jquery-plugins
person Obay    schedule 13.07.2010    source источник

Ответы (3)


arrow_upward
4
arrow_downward

В текущей версии (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, которая предоставит некоторые удобные методы для этих «служебных» функций.

person Eric Martin    schedule 22.07.2010

arrow_upward
3
arrow_downward

Когда вы превращаете элемент (назовем его 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)

person Simen Echholt    schedule 13.07.2010
comment
Я сделал это, а затем вызвал $ .modal.setPosition () ... и это сработало для меня. - person Blaise Swanwick; 18.02.2016
comment
@Blaise Хотел бы подтвердить, что объединение двух строк вместе сработало и для меня. $ (# simplemodal-container) .css ({высота: newHeight, width: newWidth}); и справа $ .modal.setPosition (); - person azakgaim; 01.03.2018

arrow_upward
1
arrow_downward

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

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


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