时间戳

首页 > 解决方案 > 模态行为 - 如何更改此代码以引入动态内容并提高页面速度？

javascript - 模态行为 - 如何更改此代码以引入动态内容并提高页面速度？

问题描述

我已经接管了一个将模态硬编码到模板中的站点构建。除了这些导致页面速度缓慢的模式之外，一切都很好 - 我认为因为每个模式都是从一个似乎有缓慢加载表单和额外脚本等的平台加载到 iFrame 中的。

我正在寻找一种方法来调整当前存在的代码，以便它动态加载模式内容，而不是仅仅在每个页面上并被 CSS 隐藏。我并不是真正的编码员，但我很确定这是一种非常笨拙的方法，并且可以显着简化！

我已经提取了相关代码并将其放在这里：

https://codepen.io/Patz/pen/oNwPJve

<div id="cta-contactus" class="modal">
    
    <div class="modal-content">
        <span class="close">&times;</span>
        <!--[if lte IE 8]>
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
        <![endif]-->
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
    </div>
</div>

也许这些表单可以嵌入到外部 iFrame 中，因此默认情况下它们不在页面上，但我认为这也不是实现这一目标的最佳方式！非常感谢任何提示:)

标签： javascriptmodal-dialog

解决方案

推荐阅读