Jquery 如何根据呈现的内容重新调整SimpleModel对话框的大小_Jquery_Simplemodal

Jquery 如何根据呈现的内容重新调整SimpleModel对话框的大小

jquery

Jquery 如何根据呈现的内容重新调整SimpleModel对话框的大小,jquery,simplemodal,Jquery,Simplemodal,我正在使用SimpleModel对话框，在一个页面中，我希望使用模式对话框来设置对话框的高度，以显示没有滚动条的内容在一个测试页面中，我使用了以下代码：我插入了一堆额外的段落标记，以表示更像表单布局。这个对话框将不需要超过屏幕的高度，但我想让对话框扩展到屏幕的最大高度，然后在必要时滚动我曾尝试在模式窗口中使用maxHeight作为选项，但css继续在DOM中恢复为内联固定高度和宽度 <link href="Styles/basic.css" rel="stylesheet" type=

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

在一个测试页面中，我使用了以下代码：我插入了一堆额外的段落标记，以表示更像表单布局。这个对话框将不需要超过屏幕的高度，但我想让对话框扩展到屏幕的最大高度，然后在必要时滚动

我曾尝试在模式窗口中使用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>

我未能根据基本模态内容div容器中高于我当前传递的400 min高度值的内容来扩展/缩放模态窗口

我是否需要修改简单的模态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）。这样，简单模式将完全适合您的隐藏标记

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

                return false;
            });
        });