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 相关文章推荐
用javascript操作xml
Nov 04 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
Less 安装及基本用法
May 05 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
什么是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
php&amp;java(二)
2006/10/09 PHP
ini_set的用法介绍
2014/01/07 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python实现k-means算法
2018/02/23 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Python中的asyncio代码详解
2019/06/10 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
为什么称python为胶水语言
2020/06/16 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
python解包概念及实例
2021/02/17 Python
大四本科生的自我评价
2013/12/30 职场文书
广播体操口号
2014/06/18 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
Java 写一个简单的图书管理系统
2022/04/26 Java/Android