通用遮盖层，即遮罩层，简单实用
<div id="cover" style="display: none;">
</div>
$("#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>
//文本框字数限制示例：
<div class="edit-text">
<textarea id="txtUserText" placeholder="写下你此刻的想法……"></textarea>
<div class="edit-technology"><span id="text-count">0</span>/100</div>
</div>
$("#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);
});
