JQuery BlockUI遮罩层
2015-01-28 00:00
309 查看
摘要: JQuery BlockUI弹出遮罩层使用
官方地址:http://jquery.malsup.com/block/
需要使用的js
引入jquery包
引入插件包JQuery BlockUI(官方下载相应的js)
demo
1.直接弹出提示话语
2.弹出一个隐藏的弹出框
3.直接弹图片
具体可以参考官网介绍
官方地址:http://jquery.malsup.com/block/
需要使用的js
引入jquery包
引入插件包JQuery BlockUI(官方下载相应的js)
demo
1.直接弹出提示话语
<!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; } </style> </head> <body> <button id="demo">点击弹出</button> </body> </html> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.blockUI.js"></script> <script type="text/javascript"> //弹出提示话语 $(function(){ $('#demo').click(function(){ jQuery.blockUI({ message: "<font><br>正在处理,请稍候...<br><br></font>", css: { width: "250", backgroundColor: "#7EC0EE", border: "2px solid #104E8B" }, overlayCSS: { backgroundColor: '#000', opacity: 0.2,//更改遮罩层的透明度 cursor: 'wait' } }); }); }) </script>
2.弹出一个隐藏的弹出框
<!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.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>
3.直接弹图片
<script language="javascript"> jQuery(document).ready(function(){ jQuery.blockUI.defaults.message = "<br><font>请稍候...<br><br></font>"; jQuery.blockUI.defaults.css.width = "300"; jQuery.blockUI.defaults.css.backgroundColor = "#FFFFFF"; //#7EC0EE jQuery.blockUI.defaults.css.border = "0px solid #104E8B"; jQuery.blockUI.defaults.overlayCSS.backgroundColor = "#FFF68F"; //遮罩的背景色 //遮罩层显示图片,并定位在右上角 jQuery("#btnClick").click(function(){ jQuery.blockUI({ message: jQuery("#question"), centerY: 0, css: { width: jQuery("#img1").width(), height: jQuery("#img1").height(), left: "", right: "10", top: "10" }, fadeIn: 700, //淡入的时间长度 fadeOut: 700, //淡出的时间长度 showOverlay: false, //不显示遮罩背景色 timeout: 2000 //自动退出遮罩 }); /* setTimeout(function() { jQuery.unblockUI({ onUnblock: function(){ alert('退出遮罩后触发该事件!'); } }); }, 3000); jQuery('.blockOverlay').attr('title', '单击退出遮罩').click(jQuery.unblockUI); */ }); }); </script> <input id=btnClick type=button value=click> <div id="question" style="display:none; cursor:default;"> <img id="img1" src="111.jpg"> </div>
具体可以参考官网介绍
相关文章推荐
- jQuery遮罩插件 jQuery.blockUI.js
- jquery blockUI插件实现遮罩层
- Jquery.BlockUI-遮罩
- BlockUI jQuery遮罩插件
- jquery blockui 遮罩【转】
- jquery blockUI 遮罩不能消失与不能提交的解决方法
- jquery blockUI 遮罩不能消失与不能提交的解决方法
- jQuery BlockUI Plugin加载插件
- JQuery blockUI 的使用方法
- jquery blockui
- 弹出层之2:JQuery.BlockUI
- 用JQuery BlockUI实现删除确认对话框
- 弹出层之2:JQuery.BlockUI
- 等待刷新之利器 -- 简单使用JQuery BlockUI
- 关于 jQuery blockUI 的一点小问题
- How to use jquery plugin jquery.blockUI.js?
- jquery.blockUI.js
- 使用JQuery blockUI插件示例(加载数据时使用相当于updateprogress)
- JQuery blockUI
- 关于 jQuery blockUI 的一点小问题(二)