jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】


Posted in Javascript onSeptember 14, 2016

本文实例讲述了jQuery实现带遮罩层效果的blockUI弹出层。分享给大家供大家参考,具体如下:

首先先附上代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <title>blockUI(弹出层)</title>
   <style type="text/css">
   #demo {
     width:100px;
     height:24px;
     text-align:center;
   }
   #displayBox{
     display:none;
   }
   </style>
 </head>
 <body>
   <button id="demo">点击弹出</button>
   <div id="displayBox">
     这里是弹出层显示的内容!!!<br /><br /><br /><a href="javascript:void(0);" onclick="$.unblockUI();return false;" title="点击关闭">点击关闭</a>
   </div>
 </body>
 </html>
 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="jquery.blockUI.js"></script>
 <script type="text/javascript">
 $(function(){
   $('#demo').click(function(){
     $.blockUI({
       message: $('#displayBox'),
       css: {
         width: '500px',
         height: '100px',
         backgroundColor: '#eee',
         border: '1px solid red',
         color: 'green',
         textAlign: 'center',
         cursor: 'default'
       }
     });
   });
 })
 </script>

运行效果图如下:

jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】

参数说明如下:

message = 需要弹出的内容

css = 弹出内容的样式,其中属性需要写成 js 的形式,如 background-color => backgroundColor

$.unblockUI() = 关闭弹层

完整实例代码点击此处本站下载

再附上官网地址:http://www.malsup.com/jquery/block/

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS脚本defer的作用示例介绍
Jan 02 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
什么是JavaScript注入攻击?
Sep 14 #Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 #Javascript
再谈javascript注入 黑客必备!
Sep 14 #Javascript
AngularJS 表达式详解及实例代码
Sep 14 #Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 #Javascript
js注入 黑客之路必备!
Sep 14 #Javascript
AngularJS 模块化详解及实例代码
Sep 14 #Javascript
You might like
PHP4在Windows2000下的安装
2006/10/09 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
浅谈python迭代器
2017/11/08 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
Python中return函数返回值实例用法
2020/11/19 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
网络方面基础面试题
2012/11/16 面试题
试用期转正鉴定评语
2014/01/27 职场文书
2014村务公开实施方案
2014/02/25 职场文书
大学自主招生推荐信
2014/05/10 职场文书
倡议书范文大全
2015/04/28 职场文书
红楼梦读书笔记
2015/06/25 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android
理解python中装饰器的作用
2021/07/21 Python
MySQL数据管理操作示例讲解
2022/12/24 MySQL