通用遮盖层，即遮罩层，简单实用

$("#cover").css({ left:0, top: 0, height: "100%", width: "100%", position: "fixed", "background-color": 'black', "z-index": 999, opacity: 0.7, display: "block" });

或

$("#cover").css({ left:0, top: 0, right:0, bottom:0, position: "fixed", "background-color": 'black', "z-index": 999, opacity: 0.7, display: "block" });

//上面的遮罩层完善如下：

<html>
<head>
<style type="text/css">
#loading{
width:100%;
height: 100%;
position:fixed;
top: 0;
left: 0;
background-color: black;
z-index: 999;
opacity: 0.6;
display: none;
}

#loading img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* 高度的一半 */
margin-left: -25px; /* 宽度的一半 */
}

</style>
<script src='jquery-1.8.2.min.js'></script>
<script type='text/javascript'>
function showpop()
{
$("#loading").toggle();
}
</script>
</head>
<body>
<div id="loading">
<img src="loading.gif" alt="loading">
</div>
<input type="button" id='btn' value='click me' onclick="showpop()">
</body>
</html>

//文本框字数限制示例：

$("#txtUserText").on("input propertychange", function () {
                var $this = $(this),
                    _val = $this.val(),
                    count = "";
                if (_val.length > 100) {
                    $this.val(_val.substring(0, 100));
                }
                count = $this.val().length;
                $("#text-count").text(count);
            });