Javascript 更改后，类名恢复为原始状态

我正在尝试用CSS和Javascript创建一个类似Lightbox的效果。我得到一个元素的id（OverlyContainer），它将改变它的类名以适应现在的黑暗背景。我将代码设置为检查元素（OverlyContainer）的类名值，以查看类名是设置为非活动（正常背景）还是活动（较暗）。但是，当我按下submit按钮更改状态时，它会在一秒钟内改变类（屏幕在一瞬间变暗），但随后会恢复到原始状态（OverlayInactive）。如果有人对此有任何解释，请回复

以下是我的CSS代码：

.OverlayBoxInactive {
    background-color: rgba(0, 0, 0, 0);

    position: absolute;
    width: 0%;
    height: 0%;

    top: 0px;
    left: 0px;
}

.OverlayBoxActive {
    background-color: rgba(0, 0, 0, 0.85);

    position: absolute;
    width: 100%;
    height: 100%;

    top: 0px;
    left: 0px;
}

下面是我的Javascript代码：

function ActivateOverlay() {

    var overlayBox = document.getElementById("OverlayContainer");
    var elementClassName = overlayBox.className;

    if (elementClassName == "OverlayBoxInactive") {
        overlayBox.setAttribute("class", "OverlayBoxActive");
        //alert('Overlay Activated');
    } else if (elementClassName == "OverlayBoxActive") {
        overlayBox.setAttribute("class", "OverlayBoxInactive");
        //alert('Overlay Inactivated');
    }

}

提前感谢,

-雷利提兹

---

编辑发布：

输入type=“submit”的默认操作是将表单的数据发布回服务器，从而导致页面重新加载。这就是您的类被删除的原因

如果希望阻止页面重新加载，则需要阻止默认操作。最简单的方法是从

onclick

处理程序返回false：

onclick="ActivateOverlay(); return false;"

---

input type=“submit”

的默认操作是将表单的数据发布回服务器，这会导致页面重新加载。这就是您的类被删除的原因

如果希望阻止页面重新加载，则需要阻止默认操作。最简单的方法是从

onclick

处理程序返回false：

onclick="ActivateOverlay(); return false;"

---

您需要在函数中添加preventDefault（）。它正在重新加载页面

首先将该元素添加到通话中：

onclick="ActivateOverlay(this)"

然后在函数中添加带有“阻止”的参数-如下所示“

---

您需要在函数中添加preventDefault（）。它正在重新加载页面

首先将该元素添加到通话中：

onclick="ActivateOverlay(this)"

然后在函数中添加带有“阻止”的参数-如下所示“

---

您的代码不起作用，因为：

• 您使用的是输入

  type=submit

  [因此您得到了一种刷新页面的感觉]，应该是

  type=button

  或

  return false在单击处理程序中

• 您正在调用函数

  ActivateOverlay

  ，该函数的定义晚于调用本身

在JSFIDLE中找到您的解决方案

<script>
    function ActivateOverlay() {
        //alert('Overlay Activated');

        var overlayBox = document.getElementById("OverlayContainer");
        var elementClassName = overlayBox.className;

        if (elementClassName == "OverlayBoxInactive") {
            overlayBox.setAttribute("class", "OverlayBoxActive");
            //alert('Overlay Activated');
        } else if (elementClassName == "OverlayBoxActive") {
            overlayBox.setAttribute("class", "OverlayBoxInactive");
            //alert('Overlay Inactivated');
        }
    }
</script>
<div id="OverlayContainer" class="OverlayBoxInactive"></div>
<div class="main"></div>
<fieldset>
    <form>
        <input type="button" onclick="ActivateOverlay();return false" value="Hit Me"></input>
    </form>
</fieldset>
<script type="text/javascript" src="index.js"></script>

函数ActivateOverlay（）{
//警报（“覆盖激活”）；
var overlayBox=document.getElementById（“OverlayContainer”）；
var elementClassName=overlayBox.className；
如果（elementClassName==“OverlyBox活动”）{
setAttribute（“类”，“OverlyBox活动”）；
//警报（“覆盖激活”）；
}else if（elementClassName==“OverlyBoxActive”）{
setAttribute（“类”，“OverlyBox活动”）；
//警报（“覆盖停用”）；
}
}

---

您的代码无法工作，因为：

• 您使用的是输入

  type=submit

  [因此您得到了一种刷新页面的感觉]，应该是

  type=button

  或

  return false在单击处理程序中

• 您正在调用函数

  ActivateOverlay

  ，该函数的定义晚于调用本身

在JSFIDLE中找到您的解决方案

<script>
    function ActivateOverlay() {
        //alert('Overlay Activated');

        var overlayBox = document.getElementById("OverlayContainer");
        var elementClassName = overlayBox.className;

        if (elementClassName == "OverlayBoxInactive") {
            overlayBox.setAttribute("class", "OverlayBoxActive");
            //alert('Overlay Activated');
        } else if (elementClassName == "OverlayBoxActive") {
            overlayBox.setAttribute("class", "OverlayBoxInactive");
            //alert('Overlay Inactivated');
        }
    }
</script>
<div id="OverlayContainer" class="OverlayBoxInactive"></div>
<div class="main"></div>
<fieldset>
    <form>
        <input type="button" onclick="ActivateOverlay();return false" value="Hit Me"></input>
    </form>
</fieldset>
<script type="text/javascript" src="index.js"></script>

函数ActivateOverlay（）{
//警报（“覆盖激活”）；
var overlayBox=document.getElementById（“OverlayContainer”）；
var elementClassName=overlayBox.className；
如果（elementClassName==“OverlyBox活动”）{
setAttribute（“类”，“OverlyBox活动”）；
//警报（“覆盖激活”）；
}else if（elementClassName==“OverlyBoxActive”）{
setAttribute（“类”，“OverlyBox活动”）；
//警报（“覆盖停用”）；
}
}

---

我现在不想使用jQuery，因为我还没有学会它。演示如何触发该函数。可能是你以某种方式触发了它两次，然后撤销了你的更改。不要害怕jquery。它非常容易学习和（大部分）易于使用。你能在中重现吗？我同意@Marc B，jQuery更容易学习-如果你想构建响应性媒体驱动的应用程序，坚持使用Javascript，jQuery不是最有效的解决方案，因为库的初始大小（在添加额外包之前）.这个功能看起来是合法的。正如mark b所说，你能展示一下你用来启动这个函数的事件处理程序吗？我现在不想使用jQuery，因为我还没有学会它。展示一下你是如何触发这个函数的。可能是你以某种方式触发了它两次，然后撤销了你的更改。不要害怕jquery。它非常容易学习和（大部分）易于使用。你能在中重现吗？我同意@Marc B，jQuery更容易学习-如果你想构建响应性媒体驱动的应用程序，坚持使用Javascript，jQuery不是最有效的解决方案，因为库的初始大小（在添加额外包之前）.这个功能看起来是合法的。正如mark b所说，您可以展示您用来启动此函数的事件处理程序吗？这是一个很好的答案，但我的项目必须尽可能轻量级，以便文件大小是可暴露的。这就是为什么我使用纯JavascriptpreventDefault不依赖于jquery。。我不知道你的意思。哦，我不知道它是什么方法，所以我在谷歌上搜索了一下，它只返回jQuery结果。不过我找到了一个好答案。谢谢你的帮助。这是一个很好的答案，但我的项目必须尽可能轻量级，以便文件大小是可暴露的。这就是为什么我使用纯JavascriptpreventDefault不依赖于jquery。。我不知道你的意思。哦，我不知道它是什么方法，所以我在谷歌上搜索了一下，它只返回jQuery结果。不过我找到了一个好答案。谢谢你的帮助。你的解决方案