我正在使用SimpleModal对话框,并且在一个页面中,我希望使用模式对话框来设置对话框的高度,以显示没有滚动条的内容。

在测试页中,我使用以下代码:我插入了一堆额外的段落标签,以更像表单布局来表示。该对话框不需要超出屏幕的高度,但是我希望对话框扩展到屏幕的最大高度,然后在必要时滚动。

我尝试在模态窗口中使用maxHeight作为选项,但css继续还原为DOM内联的固定高度和宽度。

<link href="Styles/basic.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="js/jquery-1.7.js" type="text/javascript" ></script>
    <script src="js/jquery.simplemodal-1.4.2.js" type="text/javascript" ></script>
    <script type="text/javascript">
        $(function () {
            $("#basic-modal").click(function (e) {
                $('#basic-modal-content').modal({ minHeight: 500, minWidth: 400, overlayClose: false});

                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <br />
        <br />
        <asp:TextBox Width="300" BorderColor="Black" BorderWidth="1px" Height="32px" Font-Size="1.1em"
            runat="server" /><br />
        <br />
        <a href="#" id="basic-modal">
            Click to open Modal window</a>
    </div>
    <div id="basic-modal-content">
        <h3>
            Basic Modal Dialog</h3>
        <p>
            For this demo, SimpleModal is using this "hidden" data for its content. You can
            also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p>
        <p>
            Examples:</p>
    **... removed for brevity this consisted of additional html content to invoke a scroll**

    </div>


在阅读Eric Martins网站上的文档时,我看到了有关内容恢复为溢出的参考。


SimpleModal内部定义了以下CSS类:
simplemodal-overlay,simplemodal-container,simplemodal-wrap
(SimpleModal将自动将溢出设置为auto
内容变得比容器大)和simplemodal-data。


而且我在CSS中看到以下样式:

#simplemodal-overlay {background-color:#000; }

    #simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
    #simplemodal-container .simplemodal-data {padding:8px;}
    #simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
    #simplemodal-container a {color:#ddd;}
    #simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
    #simplemodal-container h3 {color:#84b8d9;}


我无法根据当前通过的400分钟以上的身高值,根据基本模式内容div容器中的内容来扩展模式窗口以进行扩展/缩放。

我是否需要修改简单的模态js文件(这似乎不正确),或者是否可以在缺少的模态函数中传递一个选项?

更新问题

通过进一步处理,我已经能够通过使用simpleModal js文件中指定的dataCss和containerCss来覆盖宽度和高度。现在,我的呼叫如下:

$(function () {
            $("#basic-modal").click(function (e) {
                $('#basic-modal-content').modal({ dataCss: { height: "95%", width: "95%" }, containerCSS: { height: "95%", width: "95%" }, overlayClose: false });

                return false;
            });
        });


这似乎起作用或至少完成了我的尝试。

但是,如果有更好的方法,我将不胜感激任何其他建议或指示

谢谢,

最佳答案

只需删除任何宽度或高度属性(css和js)。这样,简单模态将完全适合您的隐藏标记。

10-07 14:39