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>