javascript - SimpleModal content only appears on page resize -

i'm using simplemodal pop modal on page. i'm hiding modal content on page load display:none. have simplemodal-container styled properly, , pops fine. content that's supposed in container, though, remains undisplayed; unless resize page. when resize it, content appears want to.

how content appear without resizing page?

here code looks like, in phtml file:

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

then, in separate js file:

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

and css:

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

again, simplemodal-container appears fine, without content javascript supposed generate. content appears on page , in container without "display:none" added "div_for_simplemodal", , appears in container after resize page.

you have used selector $("#div_for_simple_modal") doesn't match id of element.

use $('#div_for_simplemodal');