Question

我使用ajax允许用户删除我页面上的内容。

我可以使用哪些html / css技巧来阻止用户点击页面上的任何内容。我的屏幕中央是一个带有微调器的透明覆盖物。

在ajax我知道我可以使用beforesend和success函数来显示和隐藏加载。

    $.ajax({
            beforeSend : function (){
             $('#loading').show();
            }
            success: function (result) {
            $('#loading').hide();


            }

        });
    }

我遇到过这些微调器，但它们不是完整的叠加层，这会阻止用户点击任何东西并且它们不居中。 http://projects.lukehaas.me/css-loaders/

Answer 1

css解决方案：

＆＃13;

body.loading { 
  pointer-events: none;
}

＆＃13;

Answer 2

正如您在问题中提供的LINK中的加载器源代码中所看到的，CSS加载器是通过将类应用于div来实现的。例如： -

<div class="loader">Loading...</div>

所以，你可以这样做：

$.ajax({
  beforeSend : function (){
    $("#some_div_id").addClass("loader");
  },
  success: function (result) {
    $("#some_div_id").removeClass("loader");
  }
});

Answer 3

有一件事是使用pointer-events CSS属性阻止元素成为指针事件的目标：

.no-click {
    pointer-events: none;
}

然后只需将此类添加到不应接收任何指针事件的元素（这包括所有指针事件，如mouseenter和mouseleave）。例如，您可以将其添加到body元素以防止所有指针交互：

$.ajax({
    beforeSend: function () {
         $("body").addClass("no-click");
    },
    success: function (result) {
         $("body").removeClass("no-click");
    }
});

Answer 4

尝试在ajax请求期间切换包含微调器的引导模式：

脚本

    function sendRequest(){
        $('#modal').modal('toggle');
        $.ajax({
        success: function (result) {
            $('#modal').modal('hide');
        }

    });

}

HTML

<button id="clickButton" onclick="sendRequest()" class="buttonStyle">click me</button>
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
     <div class="loader"></div>
</div><!-- /.modal -->

Answer 5

要防止任何用户点击页面上的任何位置，您需要禁用Click事件处理程序。这是一个如何防止这种情况的例子：

＆＃13;

In [31]: df.pivot(index='difference (kg)', columns='Version', values='Decade')
Out[31]: 
Version                A2011        v1.0h
difference (kg)                          
-3.553251        1510 - 1500         None
-2.797978        1520 - 1510         None
-0.358922               None  1530 - 1520
-0.356409               None  1520 - 1510
-0.346051               None  1510 - 1500

＆＃13;

如何在发出ajax请求时阻止用户与页面交互

5 个答案: