如何调整简单模式对话框的大小答案

【问题标题】：how to re size the simple modal dialog如何调整简单模式对话框的大小
【发布时间】：2012-05-21 09:56:18
【问题描述】：

我正在尝试使 ericmmartin simplemodal 对话框更宽更高。我的要求是，如果内容很长，对话框将显示滚动条，它使用开箱即用的设置来实现。

如果我更改给定的 css 示例：#simplemodal-container {height:360px;宽度：600 像素；说宽度：700px；内容只是向下溢出对话框。

如果我尝试在点击调用中设置宽度，如 Eric 的示例中所示：$("#sample").modal({ 最小高度：400，最小宽度：600 });

(http://www.ericmmartin.com/projects/simplemodal/) 没有什么变化。请问有什么想法吗？理想情况下，如果内容长于 500 像素，我希望模态始终显示垂直滚动条。

【问题讨论】：

标签： jquery dialog simplemodal

【解决方案1】：

通过 CSS 设置模态容器的样式和大小。然后，当您通过 jQuery 实例化模态对话框时，使用“自动”大小选项动态处理对话框的大小。

在我的例子中，我们有不止一个模式对话框可以出现在同一页面上。由于 SimpleModal 对话框将包含模态容器，因此以全面的方式将宽度和高度应用于 simplemodal-container 类是不可行的。

这是我刚刚处理的示例标记。

<div id="accountCanceled" class="simplemodal-container">
    <div id="cancelWrap" class="box">
        <!-- Modal dialog markup goes here, all styled by an external CSS. -->
    </div>
</div>

这是 CSS 的一部分，用于设置上面显示的#cancelWrap div 的宽度。

#cancelWrap {
    width: 100%;
    max-width: 560px;
}

这里是相关的 jQuery。

  $canceledAlert = $('#accountCanceled');
  $canceledAlert.modal(
     {  containerCss: {
           height: 'auto',
           width: 'auto',
        }
     }
  );

记得将“自动”设置用引号括起来。

当显示此 SimpleModal 对话框时，它的容器将动态调整大小以适合 #cancelWrap div 的内容。希望这对某人有所帮助。

【讨论】：

非常好的解决方案！工作得很好，它在定位模态和动态宽度方面遇到了一些问题。这真的很完美！

【解决方案2】：

将模态框 height 和 width 设置为 auto 以便模态框不显示滚动条并根据其中的内容自动调整大小。

编辑

让模态框有一个固定的高度，并设置overflow:scroll的css属性

【讨论】：

谢谢，但我真的很想定义对话框的宽度和高度，如果内容需要更多的垂直空间，它将显示滚动条。
谢谢，但是这为整个简单的模态容器添加了一个滚动条，所以小关闭图标被切成两半并且滚动到视图之外。我正在尝试让内容在固定高度模式框中滚动。
您是否将overflow: scroll 设置为#simplemodal-container ？？
是的似乎可以解决它。谢谢你的帮助。总是很高兴知道一个人并不孤单:-)