参考 : 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 遮罩【转】的更多相关文章

  1. jquery blockui 遮罩

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

  2. jQuery遮罩插件 jquery.blockUI.js

    Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DO ...

  3. jQuery遮罩插件jQuery.blockUI.js简介

    利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 ...

  4. 弹出层之2：JQuery.BlockUI

    JQuery.BlockUI是众多JQuery插件弹出层中的一个,它小巧(原版16k,压缩后10左右),容易使用, 功能齐全,支持Iframe,支持Modal,可定制性高也意味他默认谦虚的外表. jQ ...

  5. 简单的用jQuery做遮罩效果

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  6. jQuery实现遮罩层

    1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000 ...

  7. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. jQuery BlockUI Plugin Demo 2

    Overview The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without l ...

  9. JQuery.BlockUI使用方法举例

    JQuery.BlockUI是众多JQuery插件弹出层中的一个,它小巧(原版16k,压缩后10左右),容易使用, 功能齐全,支持Iframe,支持Modal,可定制性高也意味他默认谦虚的外表. jQ ...

随机推荐

  1. sublime text3修改默认配置文件是失败的解决方法

    如果你修改sublime text3的默认配置文件Preferences.sublime-settings失败,现实的错误信息如下图: 其实根据提示信息就好找问题出在哪里了:权限 要想成功的修改默认配 ...

  2. Spring事务银行转账示例

    https://www.imooc.com/video/9331 声明式事务 @Transactiona() 编程式事务 非模板式(不使用TransactionTemplate) http://cai ...

  3. Setting Tomcat Heap Size (JVM Heap) in Eclipse

    this article picked from:http://viralpatel.net/blogs/setting-tomcat-heap-size-jvm-heap-eclipse/ Rece ...

  4. MES模块

    基础数据管理:产品模型.工厂模型.工艺模型 仓储管理 成本管理 绩效管理 看板管理 日志管理 设备管理:工装管理.设计器具管理.设备保养管理.设备备件管理.设备采集管理.设备点检管理.设备故障管理.设 ...

  5. html DOM 方法和屬性

    html利用javascript對節點執行動作: 每一個節點是一個節點對象,對節點的動作是通過方法和屬性接口實現的: 方法:就是執行的動作: 屬性就是節點的屬性(包括設置和獲取): 常見方法和作用: ...

  6. 洛谷 P3237 [HNOI2014]米特运输

    题面链接 get到新技能当然要来记录一下辣 题意:给一棵树,每个点有一个权值,要求同一个父亲的儿子的权值全部相同,父亲的取值必须是所有儿子的权值和,求最少的修改数量 sol:自己瞎鸡巴yy一下可以发现 ...

  7. Luogu3297 SDOI2013逃考（半平面交+最短路）

    把每个人的监视范围看成点,相邻的两个监视范围连边,那么跑一遍最短路就可以了(事实上边权都为1可以直接bfs).显然存在最优路线没有某个时刻同时被多于两人监视,要到达另一个区域的话完全可以经过分界线而不 ...

  8. Uva101-STL模拟

    一道有点复杂的STL模拟题,对STL迭代器不太熟悉改了好久,最后总算A了出来. 感觉用数组更方便...但是为了练习STL嘛 对比白书上的代码,我写的还是傻了点.一开始没有理解四个操作的意思,单纯的模拟 ...

  9. mysql case when 判断null

    select  name,case WHEN m.NAME is null THEN '' else m.NAME end NAME1 from  sys_users

  10. Domino 邮箱服务器接收不存在的邮箱账号的邮件

    背景: domino邮箱服务器需要设置多个邮件账号邮件转到同一个邮箱账号. 比如:现在没有了 abc@mail.com 的邮箱账号.但是当用户发邮件给它的时候就发给Support@mail.com 原 ...