jQuery blockUI 使用详解

施兴言
2023-12-01

1、使用场景

发送ajax请求时,禁止用户对浏览器的操作行为。

2、基本操作

发送ajax请求之前

$.blockUI();

ajax请求成功,返回时

这里写代码片

$.unblockUI();

示例、

$.ajax({
   url: url,
        type: 'GET', //GET
         async: false, //或false,是否异步
         data: {

         },
         timeout: 5000, //超时时间
         dataType: 'json', //返回的数据格式:
         beforeSend: function (xhr) { 
             $.blockUI();//请求之前打开
         },
         success: function (data, textStatus, jqXHR) {
             $.unblockUI();//返回关闭
         },
         error: function (xhr, textStatus) { },
         complete: function () {
          }
     });
 }

升级、
自定义样式:

$.blockUI({ css: { backgroundColor: '#f00'; color: '#fff' } })
$.blockUI({ message: '<h1><img src="busy.gif" /> loading...</h1>' });

baseZ:添加定义层,越大在上层

$.blockUI({
        message: "数据加载...",
        baseZ: 3000
      });
 类似资料: