官方地址：http://jquery.malsup.com/block/
需要使用的js
引入jquery包
引入插件包JQuery BlockUI（官方下载相应的js）
demo
1.直接弹出提示话语
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>blockUI（弹出层）</title> 6 <style type="text/css"> 7 #demo { 8 width:100px; 9 height:24px; 10 text-align:center; 11 } 12 </style> 13 </head> 14 <body> 15 <button id="demo">点击弹出</button> 16 </body> 17 </html> 18 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> 19 <script type="text/javascript" src="jquery.blockUI.js"></script> 20 <script type="text/javascript"> 21 //弹出提示话语 22 $(function(){ 23 $('#demo').click(function(){ 24 jQuery.blockUI({ 25 message: "<font><br>正在处理，请稍候...<br><br></font>", 26 css: { 27 width: "250", 28 backgroundColor: "#7EC0EE", 29 border: "2px solid #104E8B" 30 }, 31 overlayCSS: { 32 backgroundColor: '#000', 33 opacity: 0.2,//更改遮罩层的透明度 34 cursor: 'wait' 35 } 36 }); 37 }); 38 }) 39 </script>
2.弹出一个隐藏的弹出框
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>blockUI（弹出层）</title> 6 <style type="text/css"> 7 #demo { 8 width:100px; 9 height:24px; 10 text-align:center; 11 } 12 #displayBox{ 13 display:none; 14 } 15 </style> 16 </head> 17 <body> 18 <button id="demo">点击弹出</button> 19 <div id="displayBox"> 20 这里是弹出层显示的内容！！！<br /><br /><br /><a href="javascript:void(0);" onclick="$.unblockUI();return false;" title="点击关闭">点击关闭</a> 21 </div> 22 </body> 23 </html> 24 <script type="text/javascript" src="jquery.min.js"></script> 25 <script type="text/javascript" src="jquery.blockUI.js"></script> 26 <script type="text/javascript"> 27 $(function(){ 28 $('#demo').click(function(){ 29 $.blockUI({ 30 message: $('#displayBox'), 31 css: { 32 width: '500px', 33 height: '100px', 34 backgroundColor: '#eee', 35 border: '1px solid red', 36 color: 'green', 37 textAlign: 'center', 38 cursor: 'default' 39 } 40 }); 41 }); 42 }) 43 </script>
3.直接弹图片
1<script language="javascript"> 2 jQuery(document).ready(function(){ 3 jQuery.blockUI.defaults.message = "<br><font>请稍候...<br><br></font>"; 4 jQuery.blockUI.defaults.css.width = "300"; 5 jQuery.blockUI.defaults.css.backgroundColor = "#FFFFFF"; //#7EC0EE 6 jQuery.blockUI.defaults.css.border = "0px solid #104E8B"; 7 8 jQuery.blockUI.defaults.overlayCSS.backgroundColor = "#FFF68F"; //遮罩的背景色 9 10 //遮罩层显示图片，并定位在右上角 11 jQuery("#btnClick").click(function(){ 12 jQuery.blockUI({ 13 message: jQuery("#question"), 14 centerY: 0, 15 css: { 16 width: jQuery("#img1").width(), 17 height: jQuery("#img1").height(), 18 left: "", 19 right: "10", 20 top: "10" 21 }, 22 fadeIn: 700, //淡入的时间长度 23 fadeOut: 700, //淡出的时间长度 24 showOverlay: false, //不显示遮罩背景色 25 timeout: 2000 //自动退出遮罩 26 }); 27 28 /* 29 setTimeout(function() { 30 jQuery.unblockUI({ 31 onUnblock: function(){ alert('退出遮罩后触发该事件！'); } 32 }); 33 }, 3000); 34 35 jQuery('.blockOverlay').attr('title', '单击退出遮罩').click(jQuery.unblockUI); 36 */ 37 }); 38 }); 39</script> 40 41<input id=btnClick type=button value=click> 42 43<div id="question" style="display:none; cursor:default;"> 44 <img id="img1" src="111.jpg"> 45</div>
具体可以参考官网介绍