jqueryblockui居中

在网页设计中，有时候我们需要对页面的某个部分进行阻塞，以提示用户当前正在进行某些操作，比如数据加载、表单提交等，jQuery BlockUI 是一个非常流行的插件，它可以帮助我们实现页面的阻塞功能，并且提供了丰富的配置选项，包括居中显示阻塞内容，我们就来聊聊如何使用 jQuery BlockUI 来实现页面的居中阻塞效果。

我们需要在页面中引入 jQuery 和 jQuery BlockUI 插件，这通常通过在 HTML 文件中添加对应的<script> 标签来实现，确保你已经有一个可用的 jQuery 版本，因为 BlockUI 依赖于它。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>

我们需要定义一个 HTML 元素来作为阻塞内容的容器，这个容器可以是任何你想要显示在页面中央的内容，比如一个简单的文本信息或者一个复杂的表单。

<div id="blockUIContent" style="display:none;">
  <p>请稍等，正在处理...</p>
</div>

在上面的代码中，我们使用了一个div 元素，并给它设置了一个id，这样我们就可以在 JavaScript 中通过这个id 来引用它，我们还设置了style="display:none;"，这样在页面加载时，这个元素不会立即显示出来。

我们可以编写 JavaScript 代码来使用 jQuery BlockUI 插件来显示这个元素，并使其居中，我们可以通过调用$.blockUI() 方法，并传递一个配置对象来实现这一点。

$(document).ready(function() {
  // 显示阻塞UI，并使其居中
  $.blockUI({
    message: $('#blockUIContent'),
    css: {
      width: '50%', // 可以根据需要调整宽度
      top: '10%', // 根据需要调整距离顶部的距离
      left: '25%', // 根据需要调整距离左边的距离
      textAlign: 'center', // 文本居中
      color: '#000', // 文本颜色
      border: '3px solid #aaa', // 边框样式
      padding: '10px', // 内边距
      backgroundColor: '#fff', // 背景颜色
      cursor: 'wait' // 鼠标样式
    },
    overlayCSS: {
      backgroundColor: '#000', // 遮罩层背景颜色
      opacity: 0.5, // 遮罩层透明度
      cursor: 'wait' // 鼠标样式
    }
  });
});

在这段代码中，我们首先通过$(document).ready() 确保 DOM 完全加载后再执行脚本，我们调用$.blockUI() 方法，并传递一个配置对象，在这个配置对象中，我们通过message 属性指定了我们想要显示的 HTML 元素，通过css 和overlayCSS 属性来自定义阻塞内容和遮罩层的样式。

这样，当页面加载时，用户就会看到一个居中的阻塞信息，提示他们当前页面正在进行操作，这个阻塞信息会覆盖整个页面，直到我们调用$.unblockUI() 方法来解除阻塞。

// 假设在某个操作完成后解除阻塞
setTimeout(function() {
  $.unblockUI();
}, 2000); // 这里设置2秒后自动解除阻塞，实际使用时可以根据需要调整

通过上面的代码，我们可以实现一个基本的居中阻塞效果，jQuery BlockUI 插件非常灵活，你可以根据需要调整配置选项，比如改变阻塞内容的大小、位置、样式等，它还支持动画效果、自定义回调函数等功能，可以满足更复杂的需求。

jQuery BlockUI 是一个非常实用的插件，可以帮助我们轻松实现页面的阻塞和居中显示效果，通过合理配置，我们可以创建出既美观又实用的阻塞UI，提升用户体验。