如何在使用 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

我认为这些最小/最大设置仅用于设置 SimpleModal 的实际高度/宽度。只要内容的大小在最小/最大设置范围内，模态容器的大小就会根据内容进行调整。否则，模态容器大小将设置为最小/最大值。这就是它所做的一切。例如，如果内容大于 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,  
    ...

如果您不希望模态框随内容一起缩小/展开，您可以强制模态框保持在指定的宽度和高度。有些人甚至换掉了类（一种用于普通模态，一种用于长模态，等等）：

#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