blockUI 是一个用来提示等待信息的 jQuery 插件,当要执行某个较长操作时候(大数据量查询等),通过 blockUI 显示一个遮罩层或者图片来阻止当前用户继续操作。我也是今天才使用blockUI,说的不对的地方请多指教,先给一个具体的实例(JS部分)
$('#serch_button').click(function() {
$.blockUI({
message: '<h3 style="margin-top: 10px;">正在执行,请稍候...</h3>',
css: {
border: '1px solid black',
height: '40px'
}
});
setTimeout($.unblockUI, 2000);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery弹出层插件--BlockUI 效果演示</title>
<style>
*{ margin:0; padding:0;}
body{ background:#f0f0f0; font:12px Arial, Helvetica, sans-serif; color:#505050; }
#login_box { width:280px; display:none; padding-bottom:20px; position:relative; text-align:left; }
#login_box fieldset { border:0 none; }
.close { position:absolute; right:8px; top:0; display:block; width:33px; height:17px; background:url(images/close.png) no-repeat; text-indent:-9999px; outline:none; }
.top_h4 { font-size:16px; background:url(images/login_box_title_bg.png) repeat-x; line-height:36px; margin-bottom:20px; letter-spacing:1px; text-indent:23px; color:#232324; }
.label { padding-left:23px; }
.label p { font-size:13px; margin-bottom:10px; }
.label input { background:#f7f7f7; width:227px; height:20px; padding-top:2px; padding-left:3px; border:1px solid #caedbe; margin-bottom:20px; font:12px "Bitstream Vera Sans", "Trebuchet MS", Geneva, Verdana, Arial, Helvetica, sans-serif; }
.label input:hover, .label input:focus { border:1px solid #b2e06e; }
#login_box fieldset span a { text-align:center; margin-right:15px; font-size:12px; width:auto; line-height:24px; display:block; float:left; text-decoration:none; color:#63aa49; }
#login_box span a:hover { color:#000; }
#login_box .button2 a { width:65px; background:url(images/button2.gif) no-repeat; color:#232324; margin-left:23px !important; margin-left:11px; }
#login_box .button2 a:hover { text-decoration:none; background:#7e7e7d; color:#fff; }
#wrapper{ width:360px; padding:20px; margin:10% auto 0; background:#fff; border:1px solid #e0e0e0;}
h1,h3{ margin-bottom:10px; font-size:20px;}
h6{ font-weight:normal; font-size:12px; margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid #e0e0e0;}
h6 a{ color:#505050; }
button{ margin-right:20px;}
#displayBox{ display:none;}
#box{ width:600px; margin:0 auto; background:#fff; border:1px solid #ccc; padding:20px; display:none; -webkit-border-radius: 10px;-moz-border-radius: 10px; display:none; }
#box p{ margin-bottom:20px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://stylechen.com/wp-content/uploads/demo/jquery-blockui/images/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#login_box_btn').click(function(){
$.blockUI({ message: $('#login_box') });
$('.blockOverlay').attr('title','单击关闭').click($.unblockUI);
$('.close').click($.unblockUI);
});
$('#text_box_btn').click(function(){
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} });
$('.blockOverlay').attr('title','单击关闭').click($.unblockUI);
});
$('#img_box_btn').click(function(){
$.blockUI({
message: $('img#displayBox'),
css: {
top: '50%',
left: '50%',
textAlign: 'left',
marginLeft: '-200px',
marginTop: '-145px',
width: '400px',
height: '291px'
}
});
$('.blockOverlay').attr('title','单击关闭').click($.unblockUI);
});
$('#box_btn').click(function(){
$.blockUI({
message: $('#box'),
css: {
top: '50%',
left: '50%',
textAlign: 'left',
marginLeft: '-320px',
marginTop: '-145px',
width: '600px',
background:'none'
}
});
$('.blockOverlay').attr('title','单击关闭').click($.unblockUI);
});
});
</script>
</head>
<body>
<div id="login_box">
<fieldset>
<h4 class="top_h4">会员登录</h4>
<a href="#" class="close" title="关闭">close</a>
<div class="label">
<p>用户名</p>
<input id="username" name="username" type="text" />
</div>
<div class="label">
<p>密 码</p>
<input id="password" name="password" type="password"/>
</div>
<span class="button2"><a href="#">登 录</a></span><span><a href="#">忘记密码</a></span>
</fieldset>
</div>
<img src="images/demo.jpg" alt="" id="displayBox" />
<div id="box">
<h3>Mission</h3>
<p>Mozilla's mission is to promote openness, innovation, and opportunity on the web. We do this by creating great software, like the Firefox browser, and building movements, like Drumbeat, that give people tools to take control of their online lives.</p>
<p>As a non-profit organization, we define success in terms of building communities and enriching people’s lives instead of benefiting our shareholders (guess what: we don’t even have shareholders). We believe in the power and potential of the Internet and want to see it thrive for everyone, everywhere.</p>
<p>Building a better Internet is an ambitious goal, but we believe that it is possible when people who share our passion get involved. Coders, artists, writers, testers, surfers, students, grandparents—anyone who uses and cares about the web can help make it even better. Find out how you can help.</p>
</div>
<div id="wrapper">
<h1>jQuery弹出层插件--BlockUI 效果演示</h1>
<h6>by:<a href="http://stylechen.com">Stylechen</a></h6>
<button id="login_box_btn">登录表单</button>
<button id="text_box_btn">提示窗口</button>
<button id="img_box_btn">图片</button>
<button id="box_btn">div窗口</button>
</div>
</body>
</html>
分享到:
相关推荐
非常好用的一款jquery遮罩层插件,网页制作必备。
busy-load是一款灵活的jquery loading遮罩层插件。它可以在加载的时候为容器添加一个遮罩层,并显示loading效果。loader可以是字体图标,图片,文字等,非常灵活方便。
jquery遮罩层插件mloading,支持jquery低版本如1.4.4等,全屏遮罩(即:页面即使出现滚动条,仍能全部遮罩到)
基于jquery的BlockUI做的遮罩层
JQuery上传插件遮罩层插件,适合用于后台开发使用。里面包含遮罩层上传图片文件等示例。
Jquery 遮罩插件BLOCKui,非常灵活的遮罩插件。
jquery遮罩层 jquery遮罩层 jquery遮罩层 jquery遮罩层
jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会组织用户在页面进行的操作,直到插件被关闭。
jQuery遮罩层在线QQ客服代码,满足你各种需要
JQuery遮罩层登录界面源码 测试浏览器:IE8、FF3.6.8、Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边) 点击登录显示登录...
轻量级的jQuery遮罩层插件-Simple Overlay,当我们需要遮挡住某个HTML元素或者要吸引用户的注意时就会用到遮罩层
JQUERY遮罩效果实现网页JS遮罩层,使网站不用刷新操作
jQuery遮罩层在线QQ客服代码基于jquery.1.7.1.js制作,点击网页右侧浮动在线客服图标,弹出遮罩层客服中心窗口,带关闭按钮。
一组非常好看的jQuery遮罩背景弹出层对话框插件,点击按钮弹出网页对话框代码,共有16种效果。
jquery 遮罩层 拖拽
jquery遮罩层,案例简单,容易看懂。使用了jquery,案例展示显示遮罩层和3秒后隐藏遮罩层
在附件包中的示例中,主要给出了jQuery遮罩层登陆效果,另外它还可以展示隐藏的页面内容,整个插件大小只有780bytes,可灵活变化高度和宽度,没有用到任何图片,支持在一个页面中创建多个实例,非常适合于创建:登录...
主要介绍了jQuery遮罩层实现方法,结合实例形式较为详细的分析了jQuery遮罩层样式及功能实现技巧,并附带分析了一个简单jQuery遮罩层插件实现方法,需要的朋友可以参考下
这是一款jQuery图片添加渐变遮罩层插件。通过该插件,可以为一副背景图片添加指定的渐变遮罩层。该插件支持CSS mix-blend-mode混合模式。
jQuery BlockUI 插件(遮罩层)源代码 博文地址:http://blog.csdn.net/evangel_z/article/details/51123612