javascript - SimpleModal 内容仅出现在页面调整大小时

Question

我正在使用 simplemodal 在我的页面上弹出一个模式。我使用 display:none 隐藏页面加载时的模式内容。我已经正确设置了 simplemodal-container 的样式，并且弹出得很好。然而，本应位于容器中的内容仍然未显示；除非我调整页面大小。当我调整它的大小时，内容就会按照我想要的方式显示。

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

以下是我的代码在 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

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

使用$('#div_for_simplemodal');