Подтвердить что ты не робот

JQuery - простая динамическая высота

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

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

ОТВЕТЫ

Ответ 1

Я могу иметь динамическую высоту (проверяется только на chrome и ff), добавив эту функцию в последнюю строку onShow:

$('#simplemodal-container').css('height', 'auto');

надеюсь, что это может помочь. Если вы укажете containerId, вы должны заменить "# simplemodal-container" на ваш containerId.

Ответ 2

Трудность с некоторыми из решений здесь, т.е. установка высоты auto, заключается в том, что вы теряете простомодное приятное поведение, чтобы сохранить модальный размер меньше текущего размера окна (например, установив maxHeight на 90%).

Я придумал следующее решение:

 $.modal.defaults.onShow = function(dialog) {
   if (!dialog) dialog = $.modal.impl.d
   dialog.container.css('height', 'auto');
   dialog.origHeight = 0;
   $.modal.setContainerDimensions();
   $.modal.setPosition();
  }

Суть этого в том, что после запуска setContainerDimensions в активном модальном режиме он не будет пересчитывать их, если вы загружаете новый контент даже при явном вызове setContainerDimensions. То, что я здесь делаю, обходит запомненную высоту и заставляет пересчитать.

Конечно, вам придется вызывать $.modal.defaults.onShow каждый раз, когда вы меняете контент (ajax-вызов, изменение вкладок и т.д.), но вы можете сохранять возможности автозапуска и автоматического размещения, избегая ненужных полос прокрутки.

Ответ 3

Я объединил ответы Сахата и Томми, чтобы получить эту более короткую версию. Я тестировал его в Firefox, и он работает:

$.modal("<p>yourContent</p>", { onShow: function(dlg) {
    $(dlg.container).css('height','auto')
}});

Ответ 4

Поместите это в свой файл css:

.simplemodal-container
{
    height:auto !important;
}

Ответ 5

SimpleModal не имеет встроенной функции, которая регулирует высоту/ширину при изменении содержимого. Это то, что вам нужно добавить.

Ответ 6

вот мое решение:

var activeModal;
$.extend($.modal.defaults, {
    onShow: function(dialog) {
        activeModal = dialog;
        dialog.container.css('height', 'auto');
    }
});
function showModal() { // Creates a modal
    $.modal("#aModal");
}
...
function changeModalContent() { // A function that changes the modal content
    ...
    // After changing the content, do this:
    $.modal.update(activeModal.data.css('height'), 'auto');
}

Я тестировал его на FF, Chrome, Safari и Opera.

Надеюсь, что это сработает и для вас...

Привет!

Ответ 7

Удерживая высоту по умолчанию, она автоматически увеличивается. Если вы уничтожите диалоговое окно и затем сразу заново создадите его, высота авто должна существенно изменить его размер для вас. Это взломать работу, но, вероятно, проще, чем пытаться подсчитать соответствующую высоту вручную. Было бы лучше иметь опцию авторазрезания в диалоговом окне, но...

Ответ 8

Мне удалось выполнить это, уведомив параметр диалога, который передается обработчику события onShow, а затем, когда какое-то последующее событие вызывает изменение содержимого, манипулируйте свойством свойства dialog.container css height:

<script type="text/javascript">
var walkInDlg;
function doModal()  { // called from onClick of some button on the page
    jQuery.modal("#aModal", { height:"auto",
        width:500,
        backgroundColor:"#807c68",
        overlay:75,
        onShow: function(dlg) { walkInDlg = dlg },
        onClose: function(dlg) { walkInDlg = undefined; jQuery.modal.close() },
        containerCss:{border:"0",padding:"0"}
    })
}
</script>

...

// somewhere else in the page
// this is in the event handler for an action that
// adds content to the dialog

...
// after adding the content, do this:
jQuery(walkInDlg.container).css('height', 'auto')

стал свидетелем этой техники, работающей в Chrome и Firefox.

Ответ 9

var h = $(your_content_element).css('height');

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

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

Ответ 10

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

    $.extend($.modal.defaults, {
    closeClass: "close",
    closeHTML: "<a></a>",
    minWidth: 400,
    minHeight: 200,
    maxWidth: 780,
    maxHeight: 580,
    onShow: function (dialog) {
        dialog.container.css("height", "auto");
    }
});

Ответ 11

Построение ответа 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) { ... }
});

Ответ 12

Вот простой способ динамически регулировать высоту и/или ширину Eric Martins Simple Modal. Я просто звоню, чтобы открыть модальный текст после щелчка ".something". Я измеряю высоту/ширину окна и вычитаю (px или div (высота)). Затем я устанавливаю ширину/высоту с динамически созданной переменной (-ами)

    $('.something ').click(function() {
        //Dynamically Get Height/Width of the Window
        var wh = $(window).height() - 100 
        var ww = $(window).width() - 100 
           //Can subtract other divs heights if wanted
           //var dh = $('#exampleDiv').height();
           //dh = ( wh - dh );    
        $('#modalThis').modal({
            containerCss : {                
                height : wh,
           //or height : dh             
                width : ww

            },
        });
    });

Ответ 13

.modal({
   autoResize:true,
   maxHeight: $(window).height(),                
   minHeight: $(window).height() - 100               
});

Ответ 14

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

containerCss:{}

следующим образом:

containerCss:{width: 650}

измените css-изображения верхнего и нижнего gif файла.

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