jquery simplemodal динамическая высота - PullRequest
Новая
       22

jquery simplemodal динамическая высота

19 голосов
/ 10 сентября 2009

Я использую всплывающее окно simplemodal в jquery, и я хотел бы динамически устанавливать высоту своего всплывающего окна в зависимости от содержимого. В настоящее время оно установлено на уровне 500. Если я удаляю свойство высоты, то оно работает в первый раз, но если содержимое растет, высота не изменяется сама (у меня есть вкладки во всплывающем окне, и каждая вкладка загружает различное содержимое) . 

$("#popup").modal({
        containerCss: {
            width: 550,
            height: 500
        },

Ответы [ 14 ]

0 голосов
/ 20 декабря 2012

Основываясь на ответе dmnc, я смог добиться этого, добавив код в функцию onOpen в обратном вызове для контейнера fadeIn.

По мере визуализации контента происходит некоторый скачок позиции, но теперь он меняется и идеально подходит заново. 

$('#target').modal({
    overlayClose: true,
    onOpen: function (dialog) {
        dialog.overlay.fadeIn('fast', function(){
            dialog.data.hide();
            dialog.container.fadeIn('fast', function(){
                dialog.data.fadeIn('fast');

                // where the magic happens
                dialog.container.css('height', 'auto');
                dialog.origHeight = 0;
                $.modal.setContainerDimensions();
                $.modal.setPosition();
            });
        });
    },
    onClose: function (dialog) { ... }
});
0 голосов
/ 28 ноября 2010

Вот что я делаю: 

    $.extend($.modal.defaults, {
    closeClass: "close",
    closeHTML: "<a></a>",
    minWidth: 400,
    minHeight: 200,
    maxWidth: 780,
    maxHeight: 580,
    onShow: function (dialog) {
        dialog.container.css("height", "auto");
    }
});
0 голосов
/ 03 декабря 2009

в jquery.simplemodal.js, перезаписать 

containerCss:{}

этим: 

containerCss:{width: 650}

Измените изображения CSS в верхнем и нижнем GIF-файле.

Арман де Гусман де Кастро: -)

0 голосов
/ 10 сентября 2009 
var h = $(your_content_element).css('height');

$("#popup").modal({
        containerCss: {
            width: 550,
            height: h
        },

Затем вам нужно найти способ, чтобы при запуске модального режима скрипт снова вычислял высоту.

Страница:
...