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

Question

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

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

Answer 1

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

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

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

Answer 2

Сложность с некоторыми решениями здесь, то есть с настройкой высоты auto, заключается в том, что вы теряете хорошее поведение simplemodal, чтобы поддерживать модальный размер меньше текущего размера окна (например, устанавливая 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, изменение вкладки и т. Д.), Но вы можете сохранить возможности autoResize и autoPosition, избегая при этом ненужных полос прокрутки.

Answer 3

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

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

Answer 4

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

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

Answer 5

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

Answer 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.

Надеюсь, у вас это тоже получится ...

Привет!

Answer 7

Мне удалось это сделать, запомнив параметр диалога, который передается в обработчик события onShow, а затем, когда какое-то более позднее событие вызывает изменение содержимого, манипулируем свойством 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.

Answer 8

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

Answer 9

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

Answer 10

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

    $('.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

            },
        });
    });