jQuery blockUI 使用详解

本文介绍如何在发送Ajax请求期间阻止用户进行浏览器操作,包括使用$.blockUI()和$.unblockUI()方法的基本步骤,并提供了一个带有自定义样式的示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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
      });
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值