如何在jQueryOnClick和ajax调用上锁定屏幕

我有一个id为“go”的submit按钮，通过它我可以从服务器端检索数据，但由于数据长度太长，加载时间太长。因此，我想在go按钮单击时添加screen locker，但我不知道如何通过客户端的jquery来完成

请告诉我一个链接，在那里我可以得到jquery屏幕锁

这是我的密码

 $(document).ready(function () {
            $("#go").click(function (e) {
                e.preventDefault();
                $("#gridId").GridUnload();
                gridload();

            });
        });


        function gridload() {
            $.ajax({
                url: 'Default2.aspx/MyMethod?fromdate=' + $("#fromdate").val() + '&todate=' + $("#todate").val(),
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                type: 'POST',
                success: function (ReportDataNew, textStatus, XMLHttpRequest) {
                    //debugger;
                    gridData = JSON.parse(ReportDataNew.d);
                    //console.log(gridData);
                    //alert(gridData.length);


                    $("#gridId").jqGrid({
                        data: gridData,
                        datatype: "local",
                        height: '100%',
                        autowidth: true,
                        ignoreCase: true,
                        rowNum: 50,
                        rowList: [50, 100, 200],
                        colNames: ['UserName', 'Ordinal', 'Extension', 'Trunk', 'DialDate', 'DialTime', 'Duration', 'Destination', 'Price'],
                        colModel: [
                            { name: 'username', index: 'username', width: 100, editable: true, sortable: true, align: 'center' },
                            { name: 'ordinal', index: 'ordinal', width: 100, editable: true, sortable: true, align: 'center' },
                            { name: 'extension', index: 'extension', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'trunk', index: 'trunk', width: 100, editable: true, sortable: true, align: 'center' },
                            { name: 'dialdate', index: 'dialdate', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'dialtime', index: 'dialtime', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'duration', index: 'duration', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'destination', index: 'destination', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'price', index: 'price', width: 100, editable: true, sortable: true, align: 'center' }

                        ],
                        pager: '#gridpager',
                        viewrecords: true,
                        toppager: true,
                        loadtext: 'Loading...'

                    });

任何帮助都将不胜感激。。

---

提前感谢。

如果您想使屏幕“锁定”，您应该在html代码中的

正文

标记末尾添加

。然后向

locker

类添加一些样式：

.locker {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8); /*lets make it semi-transparent */
z-index: 9999; /*because you could set some z-indexes in your code before, so lets make sure that this will be over every elements in html*/
}

然后，您的javascript代码应该如下所示：

$(document).ready(function () {
    var locker = $('.locker');
            $("#go").click(function (e) {
                e.preventDefault();
                    $("#gridId").GridUnload();
                    gridload();
                    canClick = false;
                    locker.css('display', 'block');
            });
        });


        function gridload() {
            $.ajax({
                url: 'Default2.aspx/MyMethod?fromdate=' + $("#fromdate").val() + '&todate=' + $("#todate").val(),
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                type: 'POST',
                success: function (ReportDataNew, textStatus, XMLHttpRequest) {
                    locker.css('display', 'none');
                    //debugger;
                    gridData = JSON.parse(ReportDataNew.d);
                    //console.log(gridData);
                    //alert(gridData.length);


                    $("#gridId").jqGrid({
                        data: gridData,
                        datatype: "local",
                        height: '100%',
                        autowidth: true,
                        ignoreCase: true,
                        rowNum: 50,
                        rowList: [50, 100, 200],
                        colNames: ['UserName', 'Ordinal', 'Extension', 'Trunk', 'DialDate', 'DialTime', 'Duration', 'Destination', 'Price'],
                        colModel: [
                            { name: 'username', index: 'username', width: 100, editable: true, sortable: true, align: 'center' },
                            { name: 'ordinal', index: 'ordinal', width: 100, editable: true, sortable: true, align: 'center' },
                            { name: 'extension', index: 'extension', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'trunk', index: 'trunk', width: 100, editable: true, sortable: true, align: 'center' },
                            { name: 'dialdate', index: 'dialdate', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'dialtime', index: 'dialtime', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'duration', index: 'duration', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'destination', index: 'destination', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'price', index: 'price', width: 100, editable: true, sortable: true, align: 'center' }

                        ],
                        pager: '#gridpager',
                        viewrecords: true,
                        toppager: true,
                        loadtext: 'Loading...'

                    });

---

还要检查您是否在html页面中包含了与locker相关的CSS文件。您也可以尝试使用div ID。这是我的代码

创建一个ID=“fade”的div标记，并将其放置在html页面中。现在，将下面的代码复制粘贴到 您的css文件，并将该文件包含在HTML页面中

#fade {
    display: none;
    position:absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #ababab;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .20;
    filter: alpha(opacity=80);
}

现在，在ajax调用过程中，将代码更改为

$(document).ready(function () {
$("#go").click(function (e) {
e.preventDefault();
$("#gridId").GridUnload();

document.getElementById('fade').style.display = 'block';
gridload();

document.getElementById('fade').style.display = 'none';

            });
        });

---

Thanx先生，谢谢您的回复，但屏幕在添加上述代码时没有被锁定。您说的“锁定屏幕”是什么意思？