弹出内容有时会出现在主要内容后面答案

【问题标题】：Pop-up content sometimes appearing behind main content弹出内容有时会出现在主要内容后面
【发布时间】：2016-06-29 11:18:16
【问题描述】：

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

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

网址：http://crowdsight.co/

【问题讨论】：

尝试给pop容器一个更高的z-index
请发一个jsfiddle，以便我们更好地理解问题

标签： javascript css wordpress forms popup

【解决方案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
}

【讨论】：

【解决方案2】：

前几天我也遇到了同样的问题。在您设置按钮样式的 CSS 表中，添加以下行：

zindex: 1;

在上下文中它看起来像这样：

.button {
   margin: 2px;
   border: 1px solid red;
   zindex: 1;
}

【讨论】：