19

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

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

14 回答 14

19

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

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

希望这会有所帮助。如果您指定containerId，则应将“#simplemodal-container”替换为您的 containerId。

于 2009-12-14T10:25:05.593 回答
12

这里的一些解决方案的困难，即设置高度自动，是您失去了简单模式的良好行为，以保持模式小于当前窗口大小（例如，通过将 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 功能，同时避免不必要的滚动条。

于 2011-01-28T09:43:21.263 回答
7

I combined Sahat's and Tommy's answer to get this shorter version. I tested it in Firefox and it works:

$.modal("<p>yourContent</p>", { onShow: function(dlg) {
    $(dlg.container).css('height','auto')
}});
于 2010-01-09T04:22:53.987 回答
5

把它放在你的css文件中：

.simplemodal-container
{
    height:auto !important;
}
于 2011-09-30T14:15:32.637 回答
3

SimpleModal 没有在内容更改时调整高度/宽度的内置功能。这是您必须添加的内容。

于 2009-09-17T18:07:17.787 回答
2

这是我的解决方案：

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 上对其进行了测试。

希望它也对你有用......

问候！

于 2011-09-17T09:16:53.657 回答
1

离开高度默认为自动高度。如果您销毁对话框然后立即重新创建它，则自动高度应该基本上为您调整它的大小。这是一种解决方法，但可能比尝试手动计算适当的高度更容易。在对话框中有一个自动调整大小选项会更好，但是......

于 2009-09-10T19:19:50.190 回答
1

我可以通过记住传递给 onShow 事件处理程序的对话框参数来完成此操作，然后当稍后的某些事件导致内容更改时，操作 dialog.container 的 css 高度属性：

<script type="text/javascript">
var walkInDlg;
function doModal() { // 从页面上某个按钮的 onClick 调用
    jQuery.modal("#aModal", { height:"auto",
        宽度：500，
        背景颜色：“#807c68”，
        叠加：75，
        onShow：函数（dlg）{walkInDlg = dlg}，
        onClose: function(dlg) { walkInDlg = undefined; jQuery.modal.close() },
        containerCss:{border:"0",padding:"0"}
    })
}
</脚本>

...

// 在页面的其他地方
// 这是在一个动作的事件处理程序中
// 向对话框添加内容

...
// 添加内容后，执行以下操作：
jQuery(walkInDlg.container).css('height', 'auto')

见证了这种技术在 Chrome 和 Firefox 中的工作。

于 2009-12-08T19:02:17.993 回答
0 
var h = $(your_content_element).css('height');

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

Then you have to find a way that when you trigger the modal, the script calculate the height again.

于 2009-09-10T19:01:08.883 回答
0

根据 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) { ... }
});
于 2012-12-20T18:32:05.657 回答
0

这是动态调整 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

            },
        });
    });
于 2013-07-06T00:45:38.217 回答
0

这是我所做的：

    $.extend($.modal.defaults, {
    closeClass: "close",
    closeHTML: "<a></a>",
    minWidth: 400,
    minHeight: 200,
    maxWidth: 780,
    maxHeight: 580,
    onShow: function (dialog) {
        dialog.container.css("height", "auto");
    }
});
于 2010-11-28T12:17:25.003 回答
0 
.modal({
   autoResize:true,
   maxHeight: $(window).height(),                
   minHeight: $(window).height() - 100               
});
于 2015-03-24T17:16:14.197 回答
-2

在 jquery.simplemodal.js 中，覆盖 

containerCss:{}

通过这个：

containerCss:{width: 650}

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

阿曼·德·古兹曼·德·卡斯特罗 :-)

于 2009-12-03T10:03:50.483 回答