blockUI弹出层

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

athrunzero

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

阅读量920

点赞数

分类专栏： jquery 文章标签： blockUI jquery jQuery

本文链接：https://blog.csdn.net/yjzhu1987/article/details/7788402

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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/

athrunzero

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
blockUI弹出层

blockUI弹出层html代码如下： blockUI（弹出层） #demo { width:100px; height:24px; text-align:center; } #displayBox{ display:none; } 点击弹出这里是弹出层显示的内容！！！点击关闭 js代码如下：$('#demo').
复制链接

扫一扫

专栏目录