Jquery BlockUI的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/tempdowncomputer/article/details/84244319

本文介绍了如何利用jQuery BlockUI插件来实现页面元素的阻塞与解阻塞功能，包括添加消息提示、自定义样式以及使用Model弹窗。同时提供了代码示例与详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>blockUI Dialog Examples</title>
	<meta http-equiv="Content-Type" content="text/html; charset=GBK">
	
 
    <link rel="stylesheet"  type="text/css" charset="UTF-8" href="block.css" />
    <script type="text/javascript" charset="UTF-8" src="jquery-1.7.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="jquery.blockUI.js"></script>
	<!--js高亮控件-->
	<script type="text/javascript" src="chili-1.7.pack.js"></script>

<script type="text/javascript"> 
$(document).ready(function() { 
	 
	$('#blockButton').click(function() { 
		$('div.blockMe').block({ message: null }); 
	}); 

	$('#blockButton2').click(function() { 
		$('div.blockMe').block({ 
			message: '<h1>Processing</h1>', 
			css: { border: '3px solid #a00' } 
		}); 
	}); 

	$('#unblockButton').click(function() { 
		$('div.blockMe').unblock(); 
	}); 

	$('a.test').click(function() { 
		alert('link clicked'); 
		return false; 
	}); 
	$("#modelkButton").click(function(){
			$.blockUI({
				message:"<a href='javascript:void(0)' id='closeModel'>close</a>",
				css: {
						top:  ($(window).height() - 20) /2 + 'px', 
						left: ($(window).width() - 100) /2 + 'px',
						width:'100px',
						//opacity:.2, 
						height:'20px',
						'-webkit-border-radius': '10px', 
						'-moz-border-radius':    '10px' 
					}
			});
	});
	$("#closeModel").live("click",function(){
			$.unblockUI(); 
	});
	$("#growlUIButton").click(function(){
		$.growlUI('Growl Notification', 'Have a nice day!',2000);
		/*
		block.css
		div.growlUI { background: url(check48.png) no-repeat 10px 10px;width:100px;height:50px; }
		div.growlUI h1, div.growlUI h2 { color: white; padding: 5px 5px 5px 75px; text-align: left;font-size:10px}
		div.growlUI h2 { font-size: medium }
		*/
	});
	
}); 
</script> 
<style type="text/css">
#overview h2 { border: 1px dashed gray; padding: 10px; background-color: #ffc;
    color: black; font-size: medium; margin: 10px 0;
}
#footer { font-family: sans-serif; color: #888 }
#domMessage { padding: 10px; }
div.blockMe { padding: 30px; margin: 30px; border: 10px solid #ccc; background-color: #ffd }
#question { background-color: #ffc; padding: 10px; }
#question input { width: 4em }

#demoTable { border: 1px solid #ddd }
#demoTable tr.odd { background-color: #efe }
#demoTable th { padding: 15px; background-color: #ffa }
#demoTable td { padding: 15px; vertical-align: top }
#tallContent h1 { margin: 15px }

#twitter { float:right; right: 20px; margin: 0 15px 15px 15px }
#twitter a { text-decoration: none; font-family: arial }
#twitter img { border: none; float: left }
</style>
</head>
<body>
<p>
                <input id="blockButton" type="submit" value="Block">
                <input id="blockButton2" type="submit" value="Block with Message">
                <input id="unblockButton" type="submit" value="Unblock">
				<input id="modelkButton" type="submit" value="Model">
				<input id="growlUIButton" type="submit" value="growlUIButton">
				 
				 
 </p>
 <div class="blockMe">
            <a href="#" class="test">Test link - click me!</a>
            <p>
            <select><option>Option 1</option><option>Option 2</option></select>
            lorem ipsum dolor sit amet
            consectetuer adipiscing elit
            sed lorem leo
            lorem leo consectetuer adipiscing elit
            sed lorem leo
            rhoncus sit amet
            <select><option>Option 1</option><option>Option 2</option></select>

            lorem ipsum dolor sit amet
            consectetuer adipiscing elit
            sed lorem leo
            <a href="#" class="test">Test link - click me!</a>
            lorem leo consectetuer adipiscing elit
            sed lorem leo
            rhoncus sit amet<br>
            <textarea rows="2" cols="20">test textarea</textarea>

        </p></div>
		<br./>
<pre>
	<code class="mix" style="font-size:12px">&lt;script type="text/javascript"&gt; 
	$(document).ready(function() { 
		 
		$('#blockButton').click(function() { 
			$('div.blockMe').block({ message: null }); 
		}); 

		$('#blockButton2').click(function() { 
			$('div.blockMe').block({ 
				message: '&lt;h1&gt;Processing&lt;/h1&gt;', 
				css: { border: '3px solid #a00' } 
			}); 
		}); 

		$('#unblockButton').click(function() { 
			$('div.blockMe').unblock(); 
		}); 

		$('a.test').click(function() { 
			alert('link clicked'); 
			return false; 
		}); 
	}); 
&lt;/script&gt;</code>
</pre>
<a href="http://malsup.com/jquery/block/">官网介绍</a>
</body>
</html>