Question

我正在使用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-container似乎很好，但没有我的javascript应该生成的内容。内容显示在页面和容器中，“display：none”未添加到“div_for_simplemodal”，并在我调整页面大小后显示在容器中。

Answer 1

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

使用$('#div_for_simplemodal');

SimpleModal内容仅显示在页面调整大小上

1 个答案: