blockUI弹出层

blockUI弹出层

html代码如下:

<!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);" οnclick="$.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>

js代码如下:

$('#demo').click(function(){
	$.blockUI({
		message: $('#displayBox'),
		css: {
			width: '500px',
			height: '100px',
			backgroundColor: '#eee',
			border: '1px solid red',
			color: 'green',
			textAlign: 'center',
			cursor: 'default'
		}
	});
});

参数说明:

message = 需要弹出的内容

css = 弹出内容的样式

其中属性需要写成js的形式,如 background-color => backgroundColor

$.unblockUI() = 关闭函数

具体下载地址:http://download.csdn.net/detail/athrunzero/4454660


PS:博客搬家了,以后不再 CSDN 更新了,见谅。最新博客地址:http://www.cnblogs.com/yjzhu/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章