Question

我在jquery中使用了simplemodal popup，我想根据我的内容动态设置弹出窗口的高度。目前，它固定为500.如果我删除高度属性，它第一次工作，但如果内容增长，那么高度不会自行调整（我的弹出窗口中有标签，每个标签加载不同的内容）

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

Answer 1

我可以通过将此函数添加到onShow的最后一行来获得动态高度（仅在chrome和ff上测试）：

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

希望这可以提供帮助。如果您指定 containerId ，则应将'＃simplemodal-container'替换为containerId。

Answer 2

这里的一些解决方案的难度，即设置高度自动，是你失去了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，如果你引入新内容也不会重新计算它们。我在这里做的是绕过记住的高度并强制重新计算。

每次更改内容（ajax调用，标签更改等）时，您都必须调用$ .modal.defaults.onShow，但您可以保留autoResize和autoPosition功能，同时避免不必要的滚动条。

Answer 3

我结合了Sahat和Tommy的答案来获得这个更短的版本。我在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

离开高度默认为自动高度。如果你破坏对话框然后立即重新创建它，自动高度应该基本上为你调整大小。这是一个黑客工作，但可能比尝试手动计算适当的高度更容易。在对话框中有一个自动调整大小的选项会更好......

Answer 8

我能够通过记忆传递给onShow事件处理程序的dialog参数来实现这一点，然后当一些后来的事件导致内容发生变化时，操纵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中运行。

Answer 9

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

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

然后你必须找到一种方法，当你触发模态时，脚本会再次计算高度。

Answer 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");
    }
});

Answer 11

基于dmnc的回答，我能够通过在容器fadeIn的回调中将代码添加到onOpen函数来实现这一点。

内容渲染时会有一些位置跳跃，但它现在可以完美地重新调整和重新定位。

$('#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) { ... }
});

Answer 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

            },
        });
    });

Answer 13

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

Answer 14

在jquery.simplemodal.js中，覆盖

containerCss:{}

这一个：

containerCss:{width: 650}

更改css图像的顶部和底部gif文件。

作者：Arman de Guzman de Castro： - ）

jquery simplemodal动态高度

14 个答案: