jquery blockui 遮罩【转】

参考 : http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/

blockUI.html

blockUI.html中的jquery都直接引用自互联网,本地不需要

<!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>blockUI</title>
<style type="text/css"></style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.io/min/jquery.blockUI.min.js"></script><script type="text/javascript">$(document).ready(function() {$('#showDivButton').click(function() {//建议使用这种指定div的锁,因为它可以对指定div进行解锁,灵活性在此
            $('#showDiv').block({ message: $("#paying"), css: { width: '400px' } });//而下面的这种通用div只能有一个锁,比较死板,不过大多数情景一个锁可以已经满足了//$.blockUI({ message: $("#paying"), css: { width: '400px' ,height:'300px'} });
        });$('#yes').click(function() {// update the block message,再弹个窗
            $.blockUI({ message: "<h1>Remote call in progress...</h1>" });$.ajax({url: 'http://www.baidu.com',cache: false,complete: function() {// unblock when remote call returns//解锁指定div的锁
                    $('#showDiv').unblock();$.unblockUI();}});});$('#no').click(function() {//解锁指定div的锁
            $('#showDiv').unblock();//$.unblockUI();return false;});});
</script>
</head>
<body>
<div id="showDiv"><input id="showDivButton" type="button" value="显示遮罩" /><div id ="otherDiv1" style="width:100%;height:70%;background-color:blue">我是一个无关紧要的div</div><div id ="showDiv" style="width:100%;height:70%;background-color:red">我是showDiv: paying遮罩的容器</div><div id ="otherDiv2" style="width:100%;height:70%;background-color:blue">我也是一个无关紧要的div</div><div style="width:100%;height:50%;background-color:green"><div id="paying" style="display:none; cursor: default"><table width="400" border="10" align="center"><tr bgcolor="#006666"><th height="35" colspan="2"><div align="left" class="STYLE1">等待支付宝支付</div></th></tr><tr><td height="50" colspan="2"><span class="STYLE4">请您在新打开的网上银行页面进行支付，支付完成前请不要关闭窗口</span></td></tr><tr><td width="100" height="50" align="center"><input name="success" type="button" id="yes" value="已完成支付" /></td><td width="100" height="50" align="center"><input name="fail" type="button" id="no" value="支付遇到问题,关闭" /></td></tr></table></div></div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/whatlonelytear/p/6023670.html

jquery blockui 遮罩【转】相关推荐

jQuery BlockUI 插件（遮罩层）
部分效果概述当使用AJAX时,jQuery BlockUI插件可以模拟同步行为,并且不会锁定浏览器.一旦被激活,它便会防止页面上(或页面的一部分)用户的操作,直到被停用.BlockUI给DOM带来 ...
jQuery遮罩插件jQuery.blockUI.js简介
概述: jQuery BlockUI插件可以在不锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会阻止用户在页面进行的操作,直到插件被关闭.BlockUI通过向DOM中添加元素实 ...
弹出层之2：JQuery.BlockUI
JQuery.BlockUI是众多JQuery插件弹出层中的一个,它小巧(原版16k,压缩后10左右),容易使用, 功能齐全,支持Iframe,支持Modal,可定制性高也意味他默认谦虚的外表. jQ ...
在 ASP.NET 使用 jQuery BlockUI 插件
BlockUI 是一个相当不错的jQuery插件,它可以轻易设定页面指定区域显示执行中文字(如 Loading...)并锁定该区域限制输入.简单的说,若我们希望网页在执行PostBack 或 Ajax ...
php 遮罩层,Jquery实现遮罩层的方法
本文实例讲述了Jquery实现遮罩层的方法.分享给大家供大家参考.具体如下: 1.假设#main为页面body中的最外层Div标签 2.背景被遮罩后,显示的弹出窗(默认是不显示的,所包含的CSS这里就 ...
java遮罩层_[Java教程]Jquery实现遮罩层
[Java教程]Jquery实现遮罩层 0 2012-12-13 17:00:10 1.假设#main为页面body中的最外层Div标签 2.背景被遮罩后,显示的弹出窗(默认是不显示的,所包含的CSS ...
WPF 类似jquery blockUI的遮罩Loading加载效果
最近一个小项目想用WPF重写一下,需要一个类似Jquery 的blockUI的遮罩层,在后台执行任务的过程中显示Loading... 网上找了一圈,很难找到一个可以现成使用的.最终在基于网上资料的基础 ...
jquery 半透明遮罩效果小结
最近偏离学术的道路越来越远了!! 今天要小结的是实现一个半透明遮罩效果.点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩.点击遮罩区域,该正中央 ...
jquery简洁遮罩插件
/************************** *Desc:提交操作时遮罩 *Argument:type=0 全屏遮 1局部遮 *Author:Zery-Zhang *Date:2014-09 ...

jquery blockui 遮罩【转】

blockUI.html

jquery blockui 遮罩【转】相关推荐

最新文章

热门文章