blockUI弹出层

最新推荐文章于 2018-05-05 21:01:36 发布

原创最新推荐文章于 2018-05-05 21:01:36 发布 · 977 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#blockUI #jquery #jQuery

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种利用jQuery插件blockUI实现页面弹出层的方法。通过简单的HTML结构配合JavaScript代码，演示了如何创建一个可自定义样式的弹出层，并提供了关闭弹窗的功能。

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);" 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>

js代码如下：

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