javascript - 弹出内容有时出现在主要内容后面

Question

在 WordPress 网站上，我在屏幕右上角设置了一个按钮(“请求演示”)，因此当单击时会出现一个带有一些文本和 HubSpot 表单的弹出窗口。我让它工作正常，但无论出于何种原因，大约十分之一的页面重新加载，HubSpot 表单的内容不会出现在弹出窗口中，而是默认情况下出现在网页主要内容的后面，而无需单击按钮。

它在 Firefox 上尤其糟糕，尽管它似乎有大约 50% 的时间发生。我真的很难找到解决这个问题的方法。

网站网址:http://crowdsight.co/

Answer 1

尚未成功重现您的问题，但听起来 js 隐藏了表单并将点击事件附加到“请求演示”失败了。可能是因为它找不到 dom 中的元素(表单和“请求演示”)。确保表单和按钮的初始化发生在 dom 准备好之后:

jQuery(document).ready(function() {
    //initialization here
});

或:

document.addEventListener("DOMContentLoaded", function(event) {
    //initialization here
});//unlike the jQuery function, this only works for modern browsers.

如果上面的方法失败了，你可以尝试(虽然如果上面的方法失败了这没有多大意义):

window.onload = function() {
    //initialization here
    //here we wait for all the resources to be retrieved before we go, while
    //the above approaches only waits for the dom
}