SimpleModal内容只出现在页面调整大小

我使用simplemodal在我的页面上弹出一个模式。我使用display：none隐藏了页面加载的模式内容。我有一个简单的容器，风格正确，弹出正常。尽管如此，应该在容器中的内容仍未显示;除非我调整页面大小。当我调整它的大小时，内容就像我想要的一样。SimpleModal内容只出现在页面调整大小

如何在不调整页面大小的情况下正确显示内容？

这大致就是我的代码如下所示，在一个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”，并在调整页面大小后出现在容器中。

来源

2014-09-23 typedino

jQuery选择是从DIV ID div_for_simple_modal不同！== div_for_simplemodal – 2014-09-23 15:58:47

您已使用与元素的ID不匹配的选择器$("#div_for_simple_modal")。

使用$('#div_for_simplemodal');

来源

2014-09-23 15:59:53

糟糕！你是对的，但这只是我发布这个时发生的一个错字。（在我的实际代码中的div不叫“div_for_simplemodal”）。我在这里固定它。 – typedino 2014-09-23 16:43:42

SimpleModal内容只出现在页面调整大小

回答

相关问题