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

我正在使用SimpleModal对话框并在一个页面内我想要使用模式对话框来设置对话框的高度以呈现没有滚动条的内容。如何根据呈现的内容重新调整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重叠的，simplemodal容器，simplemodal缠绕（SimpleModal将自动设置溢流到自动如果含量比容器变大），和simplemodal-数据。

而且我看到了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;}

我已经得到了模态窗口，扩大基于以上的基本模态内容的div容器内的内容/规模一直不成功我目前通过的400分钟高度值。

我是否需要修改简单的模态js文件（这看起来不正确）或者是否有一个选项可以在我缺少的模态函数中传递。

更新到问题

与此进一步的我已经能够通过使用dataCss和containerCss作为simpleModal 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; 
      }); 
     });

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

不过，我将不胜感激任何其他建议或指示，如果有一个更好的方法

谢谢

来源

2012-01-03 rlcrews

只是删除任何宽度或高度的属性（CSS和JS）。这种方式简单的模式将完全适合您的隐藏标记。

来源

2013-10-30 00:42:40 kursus

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

回答

相关问题