Question

我试图禁用整个页面，因为一旦点击该页面，不允许任何进一步点击页面上的任何内容。我知道有这么多来源有相似的背景，但我的解决方案并没有找到任何令人满意的答案。 JS：

  $("#link").on( "click", function() {
    $(this).attr('disabled','disabled');
    $("div.container").css("opacity", 0.4);
    $("#loading").css("display","block");
});

使用上面的代码我只能将页面灰显，但我也希望能够在显示时禁用页面上的任何点击。

HTML：

<div class="container">
  <a href="#">Link</a>
</div>

的CSS：

#loading  {
background: url(../images/loading.png);
display: none;
margin: auto;
}

对此有何想法？谢谢！

Answer 1

如何在内容上添加叠加层？

JS：

$(document).ready(function(){
    $("#link").on( "click", function() {
        $(body).append('<div id="overlay"></div>');
        $("#loading").show(); // sets css to display: block (can also use fadeIn()
    });
});

CSS：

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.6;
    z-index: 100;
}
#loading {
    z-index: 101;
    position: relative;
    background: url(../images/loading.png);
    display: none;
    margin: auto;
}

Answer 2

要禁用任何html元素（按钮，锚点，checbox等）的点击功能，只需设置onclick = "return false"

<div class="container">
  <a href="#">Link</a>
</div>

$('a').attr("onclick","return false");

如何在jquery点击后禁用点击页面上的任何元素

2 个答案: