JQuery插件 遮盖层
mycover.css
.holder {
width: 300px;
height: 200px;
background-color: Red;
position: fixed;
display: none;
z-index: 100;
}
.cover {
background-color: Yellow;
filter: alpha(opacity=50);
opacity: 0.5;
position: fixed;
}
mycover.js
$.fn.extend({
"showCover": function () {
//遮盖层 半透明的层
var $div = $("<div class='cover'></div>");
$("body").append($div);
//获取窗口的宽度和高度
var width = $(window).width();
var height = $(window).height();
$div.css({ "width": width, "height": height, "top": 0, left: 0 });
//登录层
var $holder = $(this);
//计算登陆层的坐标
var x = (width - $holder.width()) / 2;
var y = (height - $holder.height()) / 2;
$holder.css({ "top": y, "left": x, "display": "block" });
$(window).resize(function () {
$holder.closeCover();
$holder.showCover();
});
return $holder;
}, "closeCover": function () {
$(window).unbind("resize");
if ($(".cover").length > 0) {
$(".cover").remove();
}
//隐藏登录层
$(this).hide();
return $(this);
}
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#i1 {
position:fixed;
right:0px;
bottom:100px;
}
</style>
<link href="Css/mycover.css" rel="stylesheet" />
<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/WebForms/mycover.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#i1").animate({ "bottom": 0 }, 2000).animate({ "opacity": 0 }, 5000);
//JQuery插件方法注意点：
//1.JQuery插件方法提取到专门的js文件，引用的时候，JQuery js写在前,自己写的js写在后
//JQuery插件 实例方法演示
$.fn.extend({
"mychecked": function () {
$(this).attr("checked", true);
}, "myunchecked": function () {
$(this).attr("checked", false);
}
});
$("#btn").click(function () {
$("#cbo").mychecked();
});
//JQuery插件 静态方法演示
$.extend({
"mymax": function (a1, b1, c1) {
var mmax = a1;
if (b1 > mmax) {
mmax = b1;
}
if (c1 > mmax) {
mmax = c1;
}
return mmax;
}
});
alert($.mymax(180, 165, 193));
$(":button[value=login]").click(function () {
$(".holder").showCover().css("background-color", "blue");
});
$(":button[value=close]").click(function () {
$(".holder").closeCover();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" onclick="showCover()" value="login" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<img id="i1" src="Images/QQ截图20130328142639.jpg" />
<input type="button" id="btn" value="选中" />
<input type="checkbox" id="cbo" />
</div>
<div class="holder">
<input type="button" onclick="closeCover()" value="close" />
</div>
</form>
</body>
</html> 