Как изменить размер диалогового окна SimpleModal в зависимости от отображаемого содержимого - PullRequest
Новая
       4

Как изменить размер диалогового окна SimpleModal в зависимости от отображаемого содержимого

3 голосов
/ 03 января 2012

Я работаю с диалоговым окном 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-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 минут, которое я сейчас передаю.

DoМне нужно изменить простые модальные js-файлы (это кажется неправильным) или есть опция, которую я могу передать в модальной функции, которую мне не хватает.

Обновление вопроса

При дальнейшей работе с этим я смог переопределить ширину и высоту, используя dataCss и containerCss, как указано в js-файле 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;
            });
        });

Кажется, это работает или, по крайней мере, выполняет то, что я пытался.

Однако я был бы признателен за любые дополнительные предложения или указания, если есть лучший подход

Спасибо,

1 Ответ

0 голосов
/ 30 октября 2013

Просто удалите все свойства width или height (css AND js).Таким образом, Simple Modal идеально подойдет для вашей скрытой разметки.

...