Question

    $('a.enlarge').click(function() {
        $('#modal-image').modal({
            overlayClose: true,
            opacity: 50,
            minHeight: 462,
            minWidth: 656,
            overlayCss: {
                backgroundColor: '#fff'
            },
            appendTo: '#the-media'
        });

        return false;
    });


<div id="modal-image" style="display:none">
   <img src="someimage.jpg" width="462" height="656" id="myImage" />
</div>

图像为462px x 656px，但simplemodal会将其缩放到620px x 656px。我尝试将minheight和minwidth参数添加到js，将width和height属性添加到图像标记甚至是这个css：

#myImage { width: 462px !important; height: 656px !important; }

但这一切都没有用，图像不断调整我的simplemodal大小。无论如何要防止这种情况？我宁愿让模态灯箱显示原始图像的高度和宽度，但滚动条如果太大而不适合模态。

Answer 1

根据the documentation，简单模式还支持maxWidth和maxHeight，如果您设置minWidth和minHeight，则应该有效地强制执行模态的大小。

我无法评论它是否会自动添加滚动条，但您可以在CSS中自己定位元素，如果不是，则将overflow:auto;应用于图像容器元素。

Answer 2

从文档中可以看出，您打算使用containerCss来应用CSS。此外，jQuery中的CSS属性通常被包装为字符串。

Answer 3

Phew，最后通过将其添加到图像标记来实现它：

<img src="someimage.jpg" width="462" height="656" style="width: 462px !important; height: 656px !important" />

基本上必须移动css内联，简单模态可能会改变样式来缩放图像。虽然当我查看firebugs html标签时，我看不到通过简单模态添加到图像标签的任何其他样式，这就是为什么我傻眼了。所以我仍然不确定为什么会这样，但确实如此，以为我发布它以防其他人遇到同样的问题。

有没有办法阻止简单的模态调整图像大小？

3 个答案: