使用 jquery 禁用所有 div 内容，包括锚点、段落标签？ [复制]

Question

我需要一点关于 html css 的帮助，我想在用户通过 jquery 函数单击注销按钮后禁用具有类“main-wrapper”的 div 中的所有内容，我尝试了 2 种方法，但徒劳无功！ 这是我的 jquery 函数，

function loadLogoutBox() {
    $('#logout_box').fadeIn("slow");
    $(".main-wrapper").css({ // this is just for style
            "opacity": "0.3"  
    });
    $(".main-wrapper").disable();
    $(".top-menu").attr('disabled', true);

}

请帮忙！

Answer 1

如果我对您的理解正确，您可以创建一个占 100% 宽度和高度且具有透明背景的 div，并将其显示在主包装器上方和注销框下方。

HTML：

<div id="cover"></div>

CSS：

#cover {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1; /* make sure logout_box has a z-index of 2 */
  background-color: none;
  display: none;
}

jQuery:

function loadLogoutBox() {
    $("#cover").css("display", "block");
    $('#logout_box').fadeIn("slow");
    $(".main-wrapper").css({ // this is just for style
            "opacity": "0.3"  
    });
}

使用这种方法，你显然还必须添加一些 jQuery 来在用户返回主屏幕后移除封面。

这可以通过以下方式完成：

$("#cover").css("display", "none");

Answer 2

disabled 属性仅适用于 form 元素的子集（input、button、select 和 texarea 是我能立即想到的唯一元素）

$('.main-wrapper').find('input, textarea, button, select').each(function () {
    $(this).prop('disabled', true);
});

您还可以在包装器上放置一个覆盖div 以防止选择和锚标记的使用。将div 添加到您的 HTML 中，然后将其添加到您的 JS 和 CSS：

JavaScript

var mainWrapper = $('.main-wrapper')

mainWrapper.find('input, textarea, button, select').each(function () {
    $(this).prop('disabled', true);
});
var mainWrapperPos = mainWrapper.position();
var mainWrapperHeight = mainWrapper.height();
var mainWrapperWidth = mainWrapper.width();

$('#cover').css({
    'opacity':0.3,
    'top': mainWrapperPos.top,
    'left': mainWrapperPos.left,
    'height': mainWrapperHeight,
    'width': $('.main-wrapper').width()
});

CSS

#cover {
    position:absolute;
}

注意：您应该同时进行禁用的迭代和覆盖以防止选项卡式选择。还可以使用 <a> 锚元素将 href 设置为 # 以防止标签式使用。

jsFiddle

Answer 3

Working FIDDLE Demo

在你的包装器中添加一个overlay 层，并将其置于所有元素的前面，但在弹出窗口的后面。假设您有以下 HTML：

<div class="main-wrapper">

    Here you have data

    <span class="logout">[LOGOUT]</span>

    <div class="popup">You have successfully logout</div>
    <div class="overlay"></div>

</div>

还有一些 CSS：

.main-wrapper {
    background: green;
    padding: 100px;
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0.7;
    z-index: 5000;
    display: none;
}

.popup {
    background: red;
    padding: 5px;
    z-index: 6000;
    position: absolute;
    display: none;
}

当你点击 LOGOUT 时：

$(function () {
    $('.logout').on('click', function () {
        $('.overlay').css('display', 'block');
        $('.popup').css('display', 'block');
    });
});

检查FIDDLE DEMO。

Answer 4

此代码用于禁用具有 main-wrapper 类的 div 的所有输入元素。

     $('.main-wrapper :input').attr('disabled', true);  

与输入元素相同，您可以通过将标签名称代替输入来禁用其他元素。

      $('.main-wrapper :select').attr('disabled', true);  

Answer 5

您应该使用prop() 而不是attr()

$(".top-menu").attr('disabled', true);

应该是，这里我们假设.top-menu 应用于input、textarea 等

$(".top-menu").prop('disabled', true);

或

$(".top-menu").attr('disabled', 'disabled');

Answer 6

没有看到 html，最可能的问题是 $(".main-wrapper") 返回一个没有禁用方法的集合。您需要枚举并找到确实具有禁用功能的对象并调用它。

编辑：没有 jquery 禁用方法。您需要隐藏元素或使用 $object.prop('disabled', true); 禁用它们；

Answer 7

Andrew 是对的。但我可以建议你解决方法，隐藏一个空 div，其高度、宽度和位置与 div $(".main-wrapper") 相同，但 z-index 大于 $ (".main-wrapper") div。最初隐藏了空 div，当用户点击注销时显示空 div，空 div 接收所有点击事件和你的 $(".main-wrapper") div看起来被禁用了。

Answer 8

最简单的方法是在您的内容上和弹出窗口后面创建一个叠加层。我相信正确的 CSS 如下：

.overlay { 显示：无； 位置：绝对； 背景：#000； 不透明度：0.3： 顶部：0； 左：0； 宽度：100%； 高度：100%； }

您可能需要也可能不需要添加 z-index。然后只需使用一些 jQuery 来淡入元素。

但是，此 DIV 不能用作容器。它必须是一个独立的元素。

请原谅我没有格式化，我在 iPhone 上。