如何在使用 SimpleModal 时指定 maxWidth 和 maxHeight

Question

当我调用 simplemodal 方法时，我是这样做的：

jQuery("#stats").modal({
    maxWidth: 400,
    maxHeight: 300,
    onOpen: function (dialog) {
        dialog.overlay.fadeIn('slow', function () {
            dialog.data.hide();
            dialog.container.fadeIn('slow', function () {
                dialog.data.slideDown('slow');
            });
        });
    },
    onClose: function (dialog) {
        dialog.data.fadeOut('slow', function () {
            dialog.container.hide('slow', function () {
                dialog.overlay.slideUp('slow', function () {
                    jQuery.modal.close();
                });
            });
        });
    }
});

但是，当呈现模态时，两个最大值都会被忽略。具有内联样式的结果元素是

<div id="simplemodal-container" 
     class="simplemodal-container" 
     style="height: 697px; width: 1861px; left: 231px; top: 85.5px; position: fixed; z-index: 1002;">

我指定最大值的方式有问题吗？或者，simplemodal 有问题吗？

谢谢！ E

Answer 1

我认为那些 min/max 设置仅用于为 SimpleModal 设置实际的 height/width。只要内容的大小在 min/max 设置范围内，模态框的容器就会根据内容调整大小。否则，模态容器大小将设置为 min/max 值。这就是它所做的一切。比如内容大于maxHeight & maxWidth设置，那么就会有滚动条：

看到这个fiddle here

您的内容

<div id="stats" style="width:400px; height:400px;">
    Your content will show in modal with scroll bars, 
    because it is bigger than maxWidth, maxHeight.
</div>

模态

jQuery("#stats").modal({
    maxWidth: 300,
    maxHeight: 300,
    minWidth: 100,
    minHeight: 100,  
    ...

如果您不希望模态框与内容一起 shrink/expand，您可以强制模态框保持指定的宽度和高度。有些人甚至换掉类（一个用于普通模态，一个用于长模态等）：

#simplemodal-container {
    height: 360px;
    width: 600px;
}

如果您动态更改 div 的内容（例如来自 ajax 调用），您也可以这样做：

$("#simplemodal-container").css('height', 'auto'); //Resets container height
$("#simplemodal-container").css('width', 'auto');  //Resets container width
$(window).trigger('resize.simplemodal');           //Refresh the modal dialog

如何在使用 SimpleModal 时指定 maxWidth 和 maxHeight

How to specify maxWidth and maxHeight in using SimpleModal

simplemodal