JQuery BlockUI遮罩层

时间 2019-12-06

标签 jquery blockui 栏目 JQuery 繁體版

原文原文链接

官方地址：http://jquery.malsup.com/block/ javascript

须要使用的jscss

引入jquery包html

引入插件包JQuery BlockUI（官方下载相应的js）java

demojquery

1.直接弹出提示话语ui

<!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.弹出一个隐藏的弹出框spa

<!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>

具体能够参考官网介绍code