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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。