BlockUIＩ的使用示例_app.blockui-CSDN博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
	<head>
		<title>jQuery Block UI</title>
		<meta http-equiv=Content-Type content="text/html; charset=utf-8">

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="http://www.malsup.com/jquery/block/jquery.blockUI.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){

				$('#button1').click(function(){
					//阻止页面的用户的活动
					$.blockUI();
					//2秒后关闭窗口
					setTimeout($.unblockUI, 2000);
				});

				$('#button2').click(function(){
					//自定义信息内容
					$.blockUI({message:'this is a test message ...'});
					//2秒后关闭窗口
					setTimeout($.unblockUI, 2000);
				});

				$('#button3').click(function(){
					//自定义样式
					$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });
					//2秒后关闭窗口
					setTimeout($.unblockUI, 2000);
				});

				$('#button4').click(function(){
					//定义弹出的信息为页面的某一个元素
					$.blockUI({ message: $('#domMessage') });
				});

				$('#btnClose').click(function(){
					//关闭弹出层
					$.unblockUI();
				});

				$('#button5').click(function(){
					//设置淡入，淡出，自动关闭时间
					$.blockUI({ fadeIn: 700, fadeOut: 700, timeout: 2000 });
				});


				//简单的气泡提示
				$.growlUI('提示', 'Block UI 加载成功!');

				//延迟加载
				$('#button6').click(function(){
				    $.blockUI({
				        message: '<div style="font-size:large;font-weight:bold;"><img id="preloadImg" src="http://www.kuka-robotics.com/res/icn/ajax_loader.gif" style="margin-right:5px;" /><br>please wait ...</div>',
				        css: {padding:'25px',width:'300px'}
				    });

				    preloadImg.οnlοad=function() {
				        $('#form1').submit();
				    }
				});

			});
		</script>
	</head>
	<body>
		<ol>
	        <li>阻止页面的用户的活动,不会自动消失，请刷新：
	            <input id="button1" type="button" value="测试" />
	        </li>
	        <li>自定义消息：
	            <input id="button2" type="button" value="测试" />
	        </li>
	        <li>自定义样式：
	            <input id="button3" type="button" value="测试" />
	        </li>
	        <li>弹出指定的元素，并关闭弹出层(该层可以为隐藏)：
	            <input id="button4" type="button" value="测试" />
	        </li>
	        <li>设置淡入，淡出，自动关闭时间：
	            <input id="button5" type="button" value="测试" />
	        </li>
	    </ol>

	    <div id="domMessage" style="text-align: center; width: 200px; height: 50px; border; 1px solid #9cf; padding: 25px; display: none;">
	        <h3>Message</h3>
	        <input id="btnClose" type="button" value="关闭" />
	    </div>
	    
	    <ol>
	    	<li>延迟加载

	    		<form name="form1" id="form1" method="post" action="http://ip138.com/ips138.asp?ip=119.97.235.243&action=2">
	    			<input id="button6" type="button" value="延迟加载" />
    			</form>
	    	</li>
	    </ol>

	</body>
</html>
转自：http://blog.csdn.net/songkexin/article/details/6874863
参考：http://www.malsup.com/jquery/block/#demos