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>
jquery blockui 遮罩的更多相关文章
- jquery blockui 遮罩【转】
参考 : http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/ blockUI.html blockUI.ht ...
- jQuery遮罩插件 jquery.blockUI.js
Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DO ...
- jQuery遮罩插件jQuery.blockUI.js简介
利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 ...
- 弹出层之2:JQuery.BlockUI
JQuery.BlockUI是众多JQuery插件弹出层中的一个,它小巧(原版16k,压缩后10左右),容易使用, 功能齐全,支持Iframe,支持Modal,可定制性高也意味他默认谦虚的外表. jQ ...
- 简单的用jQuery做遮罩效果
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- jQuery实现遮罩层
1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000 ...
- 基于jQuery图片遮罩滑动文字切换特效
基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- jQuery BlockUI Plugin Demo 2
Overview The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without l ...
- JQuery.BlockUI使用方法举例
JQuery.BlockUI是众多JQuery插件弹出层中的一个,它小巧(原版16k,压缩后10左右),容易使用, 功能齐全,支持Iframe,支持Modal,可定制性高也意味他默认谦虚的外表. jQ ...
随机推荐
- 天地图应用ArcGIS发布的服务
本文包含三个部分:利用ArcMap将Excel的数据转化为ArcGIS MXD文件.利用ArcMap发布服务.天地图添加ArcGIS发布的服务. 一 MXD文件的生成 假设在Excel中存有两个点的坐 ...
- 在linux中配置安装telnet服务
Telnet 是一种流行的用于通过 Internet 登录到远程计算机的协议.Telnet 服务器软件包为远程登录主机提供了支持.要通过 Telnet 协议与另一台主机通讯,您可以使用名称或 Inte ...
- ckeditor插件
插件下载地址:http://ckeditor.com/download 1.CKeditor配置 在html页面的<head>标签中引入核心文件 ckeditor.js <scrip ...
- openStack windows时间偏移
openstack
- python 赋值、表达式
赋值的特性 赋值语句建立对象引用 变量名在首次赋值时会被创建 变量名在引用前必须先赋值 赋值语句的形式 序列赋值 >>> A, B = 1, 2 >>> print ...
- 在C#中如何将多个rtf文件内容组合在一起用一个rtf文件保存?
//重点为是使用 SelectedRtf 属性 private void button1_Click( object sender, EventArgs e ) { //mergeRTF为并内容后的 ...
- Socket原理与编程基础
一.Socket简介 Socket是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机的相关进程之间的数据交换. 几个定义: (1)IP地址:即依照TCP/IP协议分配给本地主机的 ...
- Git分支的前世今生
摘自Jack__CJ CSDN博客,写得很好,保存一下. 导读 几乎所有的版本控制系统都以某种形式支持分支. 使用分支意味着你可以把你的工作从开发主线上分离开来,以免影响开发主线. 在很多版本控制系 ...
- awk实现join
awk 有时确实比较省事,做些简单的文本处理,还是很方便的,在这介绍下两个文件的join的操作. 原始文本 bb.txt a 10 b 12 cc.txt a 11 b 13 c 15 awk joi ...
- [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...