微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

基于jquery的blockui插件显示弹出层_jquery

php中文网
发布： 2016-05-16 18:07:51
原创
1199人浏览过

blockui可以在你发送ajax请求的时候，显示一个遮罩层禁止用户对页面进行操作并显示提示信息；或者用来显示一个登陆窗口，也可用来显示图片等。
　　blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏，可以在blockUI方法中指定一些参数，来控制弹出层显示的内容，大小，位置等。blockUI方法的常用的参数有：message,css,overlayCSS,showOverlay。
　　message：主要用来设置要显示的内容，可以直接设置为一段文字，html代码或者使用jquery获取页面上隐藏的div。
　　css：主要用来设置弹出层的样式，包括弹出层的位置，大小，边框等。
　　overlayCSS：主要用来设置遮罩层的样式，包括背景色，透明度等。
　　showOverlay：主要用来设置是否显示遮罩层，如果要隐藏遮罩层可以设置为false。
　　下面通过一些例子来看看具体的用法，在页面导入jquery.min.js和jquery.blockui.js文件，具体实现代码如下：

猫眼课题宝
猫眼课题宝

5分钟定创新选题，3步生成高质量标书！

猫眼课题宝 262
查看详情 猫眼课题宝
复制代码 代码如下:

$("#btnSubmit").click(function () {
$.blockUI({
message: $("#loginForm"),
css: {
width: '300px',
height: '300px',
left: ($(window).width() - 300) / 2 + 'px',
top: ($(window).height() - 300) / 2 + 'px',
border: 'none'
}
});
});
$("#btnLogin").click(function () {
$.blockUI({
message: "

正在登录，请稍候……

",
css: {
border: '1px solid black'
}
});
setTimeout(function () { $.unblockUI() }, 1000);
});
$("#btnCancel").click(function () {
$.unblockUI();
});

对应的html代码为：
复制代码 代码如下:


相关标签：
jquery

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：jquery中eq和get的区别与使用方法_jquery 下一篇：基于jquery实现的上传图片及图片大小验证、图片预览效果代码_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
在Angular Electron应用中实现基于RxJS的用户闲置屏幕保护 本教程旨在指导如何在AngularElectron桌面应用中实现一个应用层面的用户闲置屏幕保护功能。文章将重点介绍如何利用RxJS的fromEvent和debounceTime操作符高效检测用户在指定时间内的无操作状态，并据此触发屏幕保护的显示与隐藏，提供一个灵活且性能优化的解决方案，避免了对系统全局闲置状态的依赖。
2025-11-30 13:40:16
604
Web Component中自定义开关组件状态同步的深度解析与实践 本文深入探讨WebComponent中自定义开关组件在处理checked状态时可能遇到的视觉同步问题。核心在于区分HTML属性与DOM属性的差异，并强调对于原生表单元素，应优先通过其DOM属性（如input.checked=true/false）而非直接操作HTML属性（setAttribute）来更新状态，以确保视觉与逻辑的一致性。文章通过代码示例详细阐述了问题根源及正确的解决方案。
2025-11-30 13:38:13
956
分析随机参数递归函数：基线条件计数与时间复杂度解析 本文深入探讨了一个使用随机参数进行分治的递归函数。我们将揭示为何其基线条件（basecase）的执行次数，尽管涉及随机性，却始终保持恒定。通过分析递归树的结构，特别是证明输入n等同于内部节点的数量，并结合满二叉树的性质，我们解释了这一现象。最终，文章推导出该函数的线性时间复杂度，即O(n)。
2025-11-30 13:37:19
395
使用JavaScript从点分隔字符串动态构建嵌套JSON对象 本文介绍如何利用JavaScript将一个点分隔的键字符串（如global.fontsize.bodyscale）与一个给定值currValue组合，动态地生成一个多层嵌套的JSON对象结构。核心方法是使用split()和reduceRight()函数，通过从内到外逐层封装的方式实现，高效且代码简洁。
2025-11-30 13:37:02
407
React列表渲染中独立元素状态管理的最佳实践 本教程旨在解决React应用中列表项状态管理不当导致点击事件影响所有元素的问题。我们将通过优化数据结构，为每个列表项引入独立的布尔状态，并结合不可变更新原则，精确控制单个元素的行为，确保交互事件仅触发目标项的特定效果，从而实现更精细、可预测的用户界面。
2025-11-30 13:36:02
283
JavaScript数组扁平化深度解析：理解concat行为与高效实现 本教程深入探讨JavaScript数组扁平化过程中的常见误区，特别是Array.prototype.concat()方法在不重新赋值时为何无法实现预期效果。我们将详细解释concat的非原地修改特性，并提供两种高效且现代的解决方案：利用ES6的展开运算符（spreadoperator）将元素推入新数组，以及使用内置的Array.prototype.flat()方法，通过具体代码示例演示如何正确地扁平化嵌套数组。
2025-11-30 13:35:30
127
JavaScript：高效实现对象数组到键值数组的转置 本教程旨在详细介绍如何在JavaScript中将一个包含多个JSON对象的数组转置为一个新的对象，其中新对象的键是原对象中的所有属性名，而值则是对应属性名在所有原对象中的值组成的数组。我们将通过一个高效且易于理解的函数实现这一常见数据转换需求。
2025-11-30 13:34:00
764
如何准确获取网站在Google的收录页面总数及优化管理 本文旨在提供获取网站在Google搜索引擎中收录页面总数的权威指南。针对常见编程抓取尝试的局限性和不可靠性，我们强烈推荐使用GoogleSearchConsole作为官方且全面的解决方案。它不仅能提供准确的索引数据，还能帮助网站管理员深入了解网站的索引状态、发现并解决潜在问题，从而有效提升网站在Google的可见性和表现。
2025-11-30 13:33:37
268
Vue Router配置正确但路由未生效的疑难排查与解决方案 本文深入探讨了VueRouter配置看似正确但路由未生效的疑难问题。通过回顾VueRouter的基础配置，并结合一个实际案例，揭示了这类问题可能并非源于代码逻辑错误，而是由底层文件系统或版本控制系统异常导致。文章提供了标准的排查思路，并强调了在面对难以解释的现象时，考虑外部环境因素的重要性，最终给出了有效的解决方案。
2025-11-30 13:26:09
901
基于配置生成Angular动态导航菜单与递归组件实践 本教程详细介绍了如何在Angular应用中，利用递归组件和配置数据动态构建多级导航菜单。通过定义清晰的数据接口、创建可自引用的组件，并结合*ngFor指令和@Input装饰器，实现从嵌套配置对象到交互式UI元素的无缝转换。文章涵盖了组件结构、模板逻辑、数据绑定及关键实践，旨在帮助开发者高效地构建灵活、可维护的动态菜单系统。
2025-11-30 13:12:22
696
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部