Question

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

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

如果我尝试在点击通话中设置宽度，就像在Eric的例子中一样：$（“＃sample”）。modal（{ 了minHeight：400， minWidth：600 }）;

（http://www.ericmmartin.com/projects/simplemodal/）没有什么变化。有什么想法吗？理想情况下，如果内容长于500px，我会像模式一样呈现垂直滚动条。

Answer 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的内容。希望这有助于某人。

Answer 2

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

修改

让模态具有固定高度并设置overflow:scroll
的css属性

如何重新调整简单模态对话框的大小

2 个答案: