您的位置：首页 > Web前端 > JQuery

jQuery blockUI

2010-04-14 18:43 525 查看

官方：

http://www.malsup.com/jquery/block/#overview

需要两JS：jquery和jquery.blockUI 可下载到本地，也可直接用官方地址

blockUI CSS可直接在其JS文件修改也可在$.blockUI();里修改

导入JS时一定要先将jquery.min.js写在jquery.blockUI.js前面否则执行不了！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery blockUI</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js " ></script>
<script type="text/javascript" src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$('#clickme').click(function() {
$.blockUI(
{message:$('#showme'),
css:{width:'500', border:'0'}
});
});

$("#closeme").click(function(){
$.unblockUI({fadeOut:200});
});

});
// --></script>
</head>
<body>
<input type="button" value="click me" id="clickme" />
<div style="width:500px; height:200px; background-color:#090; display:none;" id="showme">
<input type="button" value="close" id="closeme"  style="margin:50px auto; display:block"/>
</div>
</body>
</html>

jquery.blockUI弹出框的默认宽度是500px 为了保证你自定义宽高的弹出页在所有浏览器都居中

所以要设置：（div 宽600 高200时）

$.blockUI(
{message:$('#showme'),
css: {
top: ($(window).height() - 200) /2 + 'px',
left: ($(window).width() - 600) /2 + 'px',
width: '600px'
}
});

网页调用函数：

//打开弹出层函数
function blockUIOpen(url,w,h){
$.blockUI({
message:$(url),
css:{top:($(window).height()-h)/2+'px',
left:($(window).width()-w)/2+'px',width:w+'px'}
});
}

//关闭弹出层函数
function blockUIClose(){
$.unblockUI({fadeOut:200});
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航