Содержание SimpleModal появляется только на странице resize

Question

Я использую 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; } 

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

Answer 1

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

Использование $('#div_for_simplemodal');