<!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"><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;
});
});
</script></code>
</pre>
<a href="http://malsup.com/jquery/block/">官网介绍</a>
</body>
</html>