知识问答

jQuery BlockUI插件

发布时间：2026-05-09 23:49:57 浏览量：0

以下是关于 jQuery BlockUI 插件的完整攻略：

jQuery BlockUI 插件

jQuery BlockUI 插件可以用于阻止用户与页面进行交互，以便在进行某些操作时提供好的用户体验。

安装

可以从官方网站下载 jQuery BlockUI 插件，也可以使用以下 CDN：

<script src="https://cdn.jsdelivr.net/jquery.blockui/2.70/jquery.blockUI.min.js"></script>

语法

$.blockUI(options);

示例一：基本使用

<!DOCTYPE html><html><head>  <title>jQuery BlockUI 插件基本使用</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <script src="https://cdn.jsdelivr.net/jquery.blockui/2.70/jquery.blockUI.min.js"></script>  <script>    $(document).ready(function() {      $('#blockButton').click(function() {        $.blockUI({ message: '<h1>请稍等...</h1>' });        setTimeout($.unblockUI, 2000);      });    });  </script></head><body>  <button id="blockButton">阻止用户交互</button></body></html>

这将创建一个按钮，当用户单击该按钮时，将阻止用户与页面进行交互，并显示一个消息。2秒后，将解除阻止。

示例二：自定义设置

<!DOCTYPE html><html><head>  <title>jQuery BlockUI 插件自定义设置</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <script src="https://cdn.jsdelivr.net/jquery.blockui/2.70/jquery.blockUI.min.js"></script>  <script>    $(document).ready(function() {      $('#blockButton').click(function() {        $.blockUI({          message: '<h1>请稍等...</h1>',          css: {            border: 'none',            padding: '15px',            backgroundColor: '#000',            '-webkit-border-radius': '10px',            '-moz-border-radius': '10px',            opacity: .5,            color: '#fff'          }        });        setTimeout($.unblockUI, 2000);      });    });  </script></head><body>  <button id="blockButton">阻止用户交互</button></body></html>

这将创建一个按钮，当用户单击该按钮时，将阻止用户与页面进行交互，并显示一个消息。它将设置消息的样式。

总结：

jQuery BlockUI 插件可以用于阻止用户与页面进行交互，以便在进行某些操作时提供更好的用户体验。可以使用 $.blockUI(options); 来启用阻止用户交互。可以使用自定义设置来设置消息的样式等。