读书人

JQuery Blockui遮罩效能

发布时间: 2012-11-06 14:07:00 作者: rapoo

JQuery Blockui遮罩功能

.jsp页面内实现(写在<head>与</head>之间)

<script type="text/javascript"src="<s:url value="/js/jquery-1.3.2.js"/>"></script>

<script type="text/javascript"src="<s:url value="/js/jquery.js"/>"></script>

<script type="text/javascript">

???$(document).ready(function(){?

??????? $(‘#test’).click(function() { <!--test,question,no为控件的id-->

???????????$.blockUI({ message: $(‘#question’),

<!--遮罩页面,显示id为question的控件-->

??????????? css:{

???????????????top:? ($(window).height() - 500)/2 + 'px',

???????????????left: ($(window).width() - 700) /2 + 'px',

???????????????width: '700px'?

???????????????} <!--css样式-->

???????????});????????????

??????? });?

??????? $(‘#no’).click(function() {

???????????$.unblockUI(); <!--当click?id为no的控件,解除页面遮罩-->

??????????? return false;

??????? });

});

</script>

注:id为question和no的控件可以是隐藏的

Example:<div id="question" style="cursor:default; display: none;"> …</div>

?

读书人网 >Web前端

热点推荐