如何根據呈現的內容重新調整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對話框的大小

回答

相關問題