Question

我在html css中需要一些帮助，我想在用户通过jquery函数点击注销按钮后禁用具有类“main-wrapper”的div中的所有内容，我尝试了两种方式，但是徒劳无功！这是我的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

disabled属性仅适用于form元素的子集（input，button，select和texarea是我唯一的可以想到就好了）

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

此外，您可以在您的包装器上放置一个覆盖div，以防止选择和锚标签使用。在HTML中添加div，然后将其添加到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 2

如果我理解正确，您可以使用透明背景创建一个占据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 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

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

编辑：没有jquery禁用方法。您需要隐藏元素或使用$ object.prop（'disabled'，true）;

禁用它们

Answer 5

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

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

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

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

Answer 6

您应该使用prop()代替attr()

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

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

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

或

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

Answer 7

安德鲁是对的。但我可以建议你一个解决方法，有一个空的div隐藏与div $（“。main-wrapper”）相同的高度，宽度和位置，但z-index超过$ （“。main-wrapper”）div。最初隐藏了空div，当用户点击logout显示空div时，空div会收到所有点击事件和你的$（“。main-wrapper”）div看起来很残疾。

Answer 8

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

.overlay { display：none; 位置：绝对; 背景：＃000; 不透明度：0.3：顶部：0; 左：0; 宽度：100％; 身高：100％; }

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

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

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

使用包含锚点，段落标记的jquery禁用所有div内容？

8 个答案:

的JavaScript

CSS