Я работаю с диалоговым окном 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>
При чтении документации с сайта Эрика Мартинса я вижу ссылку на возврат контента к переполнению.
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;}
Я был неудачен в получении модального окна, чтобы развернуть/шкалу, основанную на содержание в пределах сНа контейнера базового модальный-контент выше значение высоты 400 минут, которое я сейчас прохожу.
Нужно ли мне изменять простые модальные файлы js (это не кажется правильным) или есть опция, которую я могу передать в рамках модальной функции, которую я пропускаю.
Update на вопрос
В работе с этим дальше я смог более-ездить ширину и высоту, используя dataCss и containerCss, как указано в пределах SimpleModal файла расслоение плотной. Мой звонок теперь выглядит так:
$(function() {
$("#basic-modal").click(function (e) {
$('#basic-modal-content').modal({ dataCss: { height: "95%", width: "95%" }, containerCSS: { height: "95%", width: "95%" }, overlayClose: false });
return false;
});
});
Это похоже на работу или, по крайней мере, на то, что я пытаюсь сделать.
Однако я был бы признателен за любые дополнительные предложения или направления, если есть лучший подход
Спасибо вам,