jquery simplemodal动态高度

Question

我在jquery中使用了simplemodal弹出窗口,我想根据我的内容动态设置弹出窗口的高度.目前,它固定为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

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

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

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