Контент SimpleModal появляется только при изменении размера страницы

Я использую simplemodal, чтобы открыть модальное окно на своей странице. Я скрываю модальное содержимое при загрузке страницы с помощью display:none. У меня правильно оформлен простой модальный контейнер, и он отлично отображается. Однако содержимое, которое должно быть в контейнере, остается неотображенным; если я не изменю размер страницы. Когда я изменяю его размер, содержимое отображается так, как я хочу.

Как сделать так, чтобы содержимое отображалось правильно без изменения размера страницы?

Вот примерно так выглядит мой код в файле phtml:

   <div id="div_for_simplemodal" style="display:none"></div>
            <script type="text/javascript">
                 *script that generates content*
            </script>

Затем в отдельном JS-файле:

    $("#div_for_simplemodal").modal({overlayClose:true});

И CSS:

  #simplemodal-container {
    height: 600px;
    width: 1200px;
    color: #bbb;
    background-color: #333;
    border: 4px solid #444;
    padding: 12px; }

Опять же, контейнер simplemodal выглядит нормально, но без содержимого, которое должен генерировать мой javascript. Содержимое отображается на странице и в контейнере без добавления «display: none» к «div_for_simplemodal» и появляется в контейнере после изменения размера страницы.


javascript simplemodal resize
person typedino    schedule 23.09.2014    source источник
comment
селектор jquery отличается от идентификатора div div_for_simple_modal !== div_for_simplemodal   -  person cesar andavisa    schedule 23.09.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вы использовали селектор $("#div_for_simple_modal"), который не соответствует идентификатору элемента.

Используйте $('#div_for_simplemodal');

person cesar andavisa    schedule 23.09.2014
comment
Ой! Вы правы, но это была просто опечатка, которую я сделал, когда публиковал это. (Div в моем реальном коде не называется div_for_simplemodal). Я исправил это здесь. - person typedino; 23.09.2014