当模态显示时添加模糊类，当模态隐藏时删除

Add blur class when modal is shown, remove when modal is hidden

本文关键字：模态 隐藏 删除 添加 显示 模糊      更新时间：2023-09-26

我正在使用Kyle Fox的jquery模态插件，我正在尝试添加一个'blur'类到主体。我正在使用下面的jquery代码，但它似乎不工作。我把它放在body关闭之前，但是当我用'toggle'类点击链接时它没有做任何事情。如果我只使用'addclass'位，它确实有效，但当然我没有办法删除'blur'类。

    $(function() {
 $(".toggle").click(function () {
     $('body').addClass("blur");

});

$('body').click(function () {
    $('body').removeClass('blur');
});

});

触发事件，点击'meer info'链接，当你把鼠标悬停在'kraantje pappie'上方的第一轮图片。

提前感谢!

下面是你的代码:

  1. 单击.toggle元素时，blur类实际添加到body元素

  2. 在添加类之后，它被脚本的第二部分删除，因为您在单击body时使用removeClass。当你点击.toggle时，你也可以点击body作为父元素;)

所以，这是错误的:

$('body').click(function () {
    $('body').removeClass('blur');
});

使用其他选择器在模式打开时更改body类，例如添加一个关闭按钮并将click事件附加到它。

看看我是否正确，只需从您的页面中删除上面的代码，然后尝试单击第一个情态元素("KRAANTJE PAPPIE")。

欢呼。

相关文章：