4

我在 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);

}

请有任何帮助！

4

8 回答 8

2

该disabled属性仅适用于作为form元素的子集（input, button,select并且texarea是我能立即想到的唯一）

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

您还可以div在包装器上放置一个覆盖层，以防止选择和锚标记的使用。将 a 添加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

于 2013-05-20T05:14:55.123 回答
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");
于 2013-05-20T05:18:41.397 回答
1

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;
}

当您单击注销时：

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

检查小提琴演示。

于 2013-05-20T05:26:10.393 回答
0

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

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

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

      $('.main-wrapper :select').attr('disabled', true);
于 2013-05-20T05:13:40.233 回答
0

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

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

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

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

或者

$(".top-menu").attr('disabled', 'disabled');
于 2013-05-20T05:14:05.493 回答
0

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

于 2013-05-20T05:16:14.180 回答
0

最简单的事情是在您的内容上创建一个覆盖，并在弹出窗口后面。我相信正确的CSS如下：

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

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

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

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

于 2013-05-20T05:25:40.930 回答
0

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

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

于 2013-05-20T05:07:46.083 回答