常用的几种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=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>分享几款jquery弹出层特效_武鸣人</title>
<style type="text/css">
<!--
*{padding:0; margin:0;}
body{font:12px Arial, Helvetica, sans-serif;}
.con{margin:0 auto; overflow:hidden; width:760px;}
ol{list-style-type:disc;}
p{line-height:20px; font-size:13px;}
p span{margin-left:20px; color:#999; font-size:12px;}
.red{color:#f00;}
.pop{overflow:hidden; width:100px; height:100px; line-height:20px; text-align:center; display:none;}
.pop_a{display:block;}
a.a1{color:#fff;}
a.a2{color:#000;}
-->
</style>
<script type="text/javascript" src="/img/jquery_wuming_ren.js"></script>
<script type="text/javascript">
var Pop = function(options){
this.isIE = (document.all) ? true : false;
this.isIE6 = this.isIE && (navigator.userAgent.indexOf('MSIE 6.0') != -1);
this.isIE6 ? this.position = "absolute" : this.position = "fixed";
this.SetOptions(options);
this.mode = this.options.mode;
this.zIndex = this.options.zIndex;
this.left = this.options.left;
this.right = this.options.right;
this.top = this.options.top;
this.bottom = this.options.bottom;
this.oPop = $("#" + this.options.oPop);
this.oPop.css({ position:this.position, "z-index":this.zIndex });
//页面载入时是否显示遮盖层
if(this.options.beCover){
this.Start();
this.Initialization();
this.FullScreen(this.heightDocument, this.widthDocument);
}
//是否添加浮动层收缩
if(!!this.options.idShrink) this.Shrink(this.options.idShrink);
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
/*关闭、打开浮动层*/
if(this.options.idClose.length != 0) this.Close(this.options.idClose);
!!this.options.idOpen ? this.Open(this.options.idOpen) : this.Start();
};
Pop.prototype = {
SetOptions: function(options){
this.options = {
/*浮动框相关属性*/
oPop: "idPop", //浮动框id
zIndex: "999", //浮动框的z-index
left: 0, //距离左边多少像素
right: 0, //距离右边多少像素
top: 0, //距离顶部多少像素
bottom: 0, //距离底部多少像素
mode: ["left", "top"], //浮动层默认定位左上
/*遮罩层相关属性*/
beCover: false, //页面载入时是否显示遮盖层
cover: false, //是否显示遮盖层(遮盖层显示的必须条件)
zIndexCover: 888, //遮盖层的z-index
colorCover: "#000", //遮盖层的背景颜色
opactiyCover: 0.5, //遮盖层的透明度
/*浮动框收缩相关属性*/
idShrink: null, //收缩按钮id
minHeight: 0, //收缩后的高度
maxHeight: 0, //展开后的高度
classOne: null, //切换用的class
classTwo: null, //切换用的class
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
/*关闭、打开浮动层相关属性*/
idOpen: null, //打开按钮
idClose: [] //关闭按钮
};
$.extend(this.options, options || {});
},
Initialization: function(){
this.widthPop = this.oPop.width();
this.heightPop = this.oPop.height();
this.heightDocument = $(document).height();
this.widthDocument = Math.min($(document).width(), $("body").width()); //避免ie6下加上滚动条的宽度
this.heightWindow = $(window).height();
this.widthWindow = $(window).width();
this.topScroll = $(window).scrollTop();
this.leftScroll = $(window).scrollLeft();
},
Start: function(){
switch(this.mode[0].toLowerCase()) {
case "left":
this.LeftRightLocation();
break;
case "right":
this.LeftRightLocation();
break;
default:
this.CenterLocation();
}
},
//mark等于false为水平垂直居中定位
GetValue: function(mark){
if(this.oPop.css("display") == "none") return; //浮动层显示时才动态计算其坐标(解决一个效率问题)
var level = this.mode[0].toLowerCase(), vertical = this.mode[1].toLowerCase();
this.Initialization();
if(mark){
if(!this.isIE6){
level == "left" ? this.oPop.css({ left: this.left }) : this.oPop.css({ right: this.right });
vertical == "top" ? this.oPop.css({ top: this.top }) : this.oPop.css({ bottom: this.bottom });
}else{
var x_final = level == "left" ? this.leftScroll + this.left : this.widthWindow + this.leftScroll - this.widthPop - this.right;
var y_final = vertical == "top" ? this.topScroll + this.top : this.heightWindow + this.topScroll - this.heightPop - this.bottom;
this.oPop.css({ top: y_final, left: x_final });
}
}else{
if(!this.isIE6){
var x_final = parseInt((this.widthWindow - this.widthPop) / 2);
var y_final = parseInt((this.heightWindow - this.heightPop) / 2);
}else{
var x_final = (this.widthWindow - this.widthPop) / 2 + this.leftScroll;
var y_final = (this.heightWindow - this.heightPop) / 2 + this.topScroll;
}
this.oPop.css({ top: y_final, left: x_final });
}
//IE6在浮动层中添加iframe
if(this.isIE6){ this.AddIframe(this.oPop, this.heightPop, this.widthPop); }
},
LeftRightLocation: function(){
this.GetValue(true);
var _this = this;
$(window).bind("scroll."+this.options.oPop, function(){
_this.GetValue(true);
}).bind("resize."+this.options.oPop, function(){
_this.GetValue(true);
})
},
CenterLocation: function(){
this.GetValue(false);
var _this = this;
$(window).bind("scroll."+this.options.oPop, function(){
_this.GetValue(false);
}).bind("resize."+this.options.oPop, function(){
_this.GetValue(false); if(_this.oPop.css("display") != "none") _this.FullScreen(_this.heightDocument, _this.widthDocument);
});
},
FullScreen: function(oHeight, oWidth){
if(!this.options.cover) return;
//遮盖层参数
this.zIndexCover = this.options.zIndexCover;
this.colorCover = this.options.colorCover;
this.opactiyCover = this.options.opactiyCover;
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
if($("#popMask").length == 0) $("body").append("<div id=\"popMask\"></div>");
//ie6遮罩层定位absolute,非ie6遮罩层定位fixed
if(this.isIE6){
$("#popMask").css({ position: "absolute", "z-index": this.zIndexCover, top: 0, left: 0, height: oHeight, width: oWidth, opacity: this.opactiyCover, background: this.colorCover });
//IE6在浮动层中添加iframe
this.AddIframe($("#popMask"), oHeight, oWidth);
}else{
$("#popMask").css({ position: "fixed", "z-index": this.zIndexCover, top: 0, left: 0, height: "100%", width: "100%", opacity: this.opactiyCover, background: this.colorCover });
}
},
//IE6覆盖select控件
AddIframe: function(iElement, iHeight, iWidth){
iElement.append("<iframe></iframe>");
var oIframe = iElement.children("iframe");
oIframe.css({ position: "absolute", top: 0, left: 0, opacity: 0, "z-index": -1, height: iHeight, width: iWidth, border: 0 });
},
//浮动层收缩
Shrink: function(iShrink){
this.minHeight = this.options.minHeight;
this.maxHeight = this.options.maxHeight;
this.classOne = this.options.classOne;
this.classTwo = this.options.classTwo;
var _this = this;
$("#" + iShrink).toggle(
function(){
_this.oPop.height(_this.minHeight);
$(this).removeClass();
$(this).addClass(_this.classOne);
if(_this.isIE6) _this.GetValue(true);
},
function(){
_this.oPop.height(_this.maxHeight);
$(this).removeClass();
$(this).addClass(_this.classTwo);
if(_this.isIE6) _this.GetValue(true);
}
);
},
Close: function(iClose){
var _this = this;
$.each(iClose, function(index, name){
$("#" + name).click(function(){
_this.oPop.css({ display: "none" });
if(!!$("#popMask")[0]) { $("#popMask").remove(); }
$(window).unbind("scroll."+_this.options.oPop);
$(window).unbind("resize."+_this.options.oPop);
})
});
},
Open: function(iOpen){
var _this = this;
var oOpen = $("#" + iOpen);
oOpen.click(function(){
_this.oPop.css({ display: "block" });
_this.Start();
//遮罩层初始化
_this.FullScreen(_this.heightDocument, _this.widthDocument);
});
}
};//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
<script type="text/javascript">
<!--
$(document).ready(function(){
var a = new Pop({ oPop: "idPop_a", zIndex: 999, mode: ["left", "bottom"], idOpen: "open_a", idClose: ["close_a", "close_a_1"] });
var b = new Pop({ oPop: "idPop_b", zIndex: 999, mode: ["right", "bottom"], idOpen: "open_b", idClose: ["close_b", "close_b_1"], idShrink: "shrink", minHeight: 20, maxHeight: 100, classOne: "a1", classTwo: "a2" });
var c = new Pop({ oPop: "idPop_c", zIndex: 999, mode: ["left", "top"], idOpen: "open_c", idClose: ["close_c", "close_c_1"] });
var d = new Pop({ oPop: "idPop_d", zIndex: 999, mode: ["right", "top"], idOpen: "open_d", idClose: ["close_d", "close_d_1"] });
var e = new Pop({ oPop: "idPop_e", zIndex: 1001, mode: ["center", "center"], idOpen: "open_e", idClose: ["close_e", "close_e_1"], cover: true, beCover: false, zIndexCover: 1000, colorCover: "#f60", opactiyCover: 0.5 });
var f = new Pop({ oPop: "idPop_f", zIndex: 1001, mode: ["center", "center"], idOpen: "open_f", idClose: ["close_f", "close_f_1"], cover: true, beCover: true, zIndexCover: 1000, colorCover: "#ccccd4", opactiyCover: 0.8 });
});//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
-->
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<!--<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>-->
需要加载js文件，请刷新页面后看效果！
<div class="con"> <br />
<br />
<h1>浮动层：4方向+水平垂直居中定位（支持遮罩效果）</h1>
<h3 class="red">IE6下是用absolute模拟fixed定位，其他浏览器都是以fixed来定位。</h3>
<h2>参数说明：</h2>
<p><strong>========浮动框相关属性============</strong></p>
<p>oPop：浮动框ID<span>（默认值：idPop）</span></p>
<p>zIndex:浮动框的z-index<span>（默认值：999）</span></p>
<p>left:距离左边多少像素<span>（默认值：0）</span></p>
<p>right:距离右边多少像素<span>（默认值：0）</span></p>
<p>top:距离顶部多少像素<span>（默认值：0）</span></p>
<p>bottom:距离底部多少像素<span>（默认值：0）</span></p>
<p>mode:浮动层默认定位左上<span>（默认值：["left", "top"]）</span></p>
<br />
<p><strong>========遮罩层相关属性============</strong></p>
<p>beCover:页面载入时是否显示遮盖层<span>（默认值：false）</span></p>
<p>cover：是否显示遮盖层（遮盖层显示的必须条件）<span>（默认值：false）</span></p>
<p>zIndexCover：遮盖层的z-index<span>（默认值：888）</span></p>
<p>colorCover：遮盖层的背景颜色<span>（默认值："#000"）</span></p>
<p>opactiyCover:遮盖层的透明度<span>（默认值：0.5）</span></p>
<br />
<p><strong>========浮动框收缩相关属性============</strong></p>
<p>idShrink:收缩按钮ID<span>（默认值：null）</span></p>
<p>minHeight:收缩后的高度<span>（默认值：0）</span></p>
<p>maxHeight:展开后的高度<span>（默认值：0）</span></p>
<p>classOne:切换用的class<span>（默认值：null）</span></p>
<p>classTwo:切换用的class<span>（默认值：null）</span></p>
<p><strong>========关闭、打开浮动层相关属性============</strong></p>
<p>idOpen:打开按钮ID<span>（默认值：null）</span></p>
<p>idClose:关闭按钮ID（支持多关闭按钮）<span>（默认值：[]）</span></p>
<br />
<h2>结构如下：</h2>
<p class="red">浮动层的position类型已在脚本里面写好，用的时候只需定义浮动层的高、宽、是否显示（display）即可</p>
<p> <div id="idPop"><br />
........... <br />
</div><br />
</p>
<br />
<h2>例一：左下</h2>
<p><a href="#blank" id="open_a">打开</a></p>
<p><a href="#blank" id="close_a">关闭</a></p>
<br /><br />
<h2>例二：右下</h2>
<p><a href="#blank" id="open_b">打开</a></p>
<p><a href="#blank" id="close_b">关闭</a></p>
<br /><br />
<h2>例三：左上</h2>
<p><a href="#blank" id="open_c">打开</a></p>
<p><a href="#blank" id="close_c">关闭</a></p>
<br /><br />
<h2>例四：右上</h2>
<p><a href="#blank" id="open_d">打开</a></p>
<p><a href="#blank" id="close_d">关闭</a></p>
<br /><br />
<h2>例五：中间</h2>
<p><a href="#blank" id="open_e">打开</a></p>
<p><a href="#blank" id="close_e">关闭</a></p>
<br /><br />
<h2>例六：中间(刷新页面直接显示)</h2>
<p><a href="#blank" id="open_f">打开</a></p>
<p><a href="#blank" id="close_f">关闭</a></p>
</div>
<div class="pop" id="idPop_a" style="background:#D7006C"><a href="#blank" id="close_a_1">关闭</a></div>
<div class="pop" id="idPop_b" style="background:#FF6900"><p><a href="#blank" id="shrink">收缩</a></p><a href="#blank" id="close_b_1">关闭</a></div>
<div class="pop" id="idPop_c" style="background:#4FA600"><a href="#blank" id="close_c_1">关闭</a></div>
<div class="pop" id="idPop_d" style="background:#007770"><a href="#blank" id="close_d_1">关闭</a></div>
<div class="pop" id="idPop_e" style="background:#f00;"><a href="#blank" id="close_e_1">关闭</a></div>
<div class="pop pop_a" id="idPop_f" style="background:#668;"><a href="#blank" id="close_f_1">关闭</a></div>
</body>
</html>