87,914
社区成员
发帖
与我相关
我的任务
分享
<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>test</title>
<link href="styles/core.css" type="text/css" rel="stylesheet"/>
<script src="scripts/jquery.1.3.2.js" type="text/javascript" language="javascript"></script>
<script src="scripts/popup_layer.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
$(document).ready(function() {
new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",eventType:"mouseover"});
});
</script>
</head>
<body>
<h1>JS前段备用</h1>
<div id="emample6" class="example">
<div id="ele6" class="tigger">触发元素6</div><div class="description">示例6<br />new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",useOverlay:true});</div>
<div class="clr"></div>
<div id="blk6" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例6</h2>
<a href="javascript:void(0)" id="close6" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
</body>
</html>
Function.prototype.binding = function() {
if (arguments.length < 2 && typeof arguments[0] == "undefined") return this;
var __method = this, args = jQuery.makeArray(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat(jQuery.makeArray(arguments)));
}
}
var Class = function(subclass){
subclass.setOptions = function(options){
this.options = jQuery.extend({}, this.options,options);
for(var key in options){
if(/^on[A-Z][A-Za-z]*$/.test(key)){
$(this).bind(key,options[key]);
}
}
}
var fn = function(){
if(subclass._init && typeof subclass._init == 'function'){
this._init.apply(this,arguments);
}
}
if(typeof subclass == 'object'){
fn.prototype = subclass;
}
return fn;
}
var PopupLayer = new Class({
options:{
trigger:null, //触发的元素或id,必填参数
popupBlk:null, //弹出内容层元素或id,必填参数
closeBtn:null, //关闭弹出层的元素或id
popupLayerClass:"popupLayer", //弹出层容器的class名称
eventType:"click", //触发事件的类型
offsets:{ //弹出层容器位置的调整值
x:0,
y:0
},
useFx:false, //是否使用特效
useOverlay:false, //是否使用全局遮罩
usePopupIframe:true, //是否使用容器遮罩
isresize:true, //是否绑定window对象的resize事件
onBeforeStart:function(){} //自定义事件
},
_init:function(options){
this.setOptions(options); //载入设置
this.isSetPosition = this.isDoPopup = this.isOverlay = true; //定义一些开关
this.popupLayer = $(document.createElement("div")).addClass(this.options.popupLayerClass); //初始化最外层容器
this.popupIframe = $(document.createElement("iframe")).attr({border:0,frameborder:0}); //容器遮罩,用于屏蔽ie6下的select
this.trigger = $(this.options.trigger); //把触发元素封装成实例的一个属性,方便使用及理解
this.popupBlk = $(this.options.popupBlk); //把弹出内容层元素封装成实例的一个属性
this.closeBtn = $(this.options.closeBtn); //把关闭按钮素封装成实例的一个属性
$(this).trigger("onBeforeStart"); //执行自定义事件。
this._construct() //通过弹出内容层,构造弹出层,即为其添加外层容器及底层iframe
this.trigger.bind(this.options.eventType,function(){ //给触发元素绑定触发事件
if(this.isSetPosition){
this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);
}
this.options.useOverlay?this._loadOverlay():null; //如果使用遮罩则加载遮罩元素
(this.isOverlay && this.options.useOverlay)?this.overlay.show():null;
if(this.isDoPopup && (this.popupLayer.css("display")== "none")){
this.options.useFx?this.doEffects("open"):this.popupLayer.show();
}
}.binding(this));
this.isresize?$(window).bind("resize",this.doresize.binding(this)):null;
this.options.closeBtn?this.closeBtn.bind("click",this.close.binding(this)):null; //如果有关闭按钮,则给关闭按钮绑定关闭事件
},
_construct:function(){ //构造弹出层
this.popupBlk.show();
this.popupLayer.append(this.popupBlk.css({opacity:1})).appendTo($(document.body)).css({position:"absolute",'z-index':2,width:this.popupBlk.get(0).offsetWidth,height:this.popupBlk.get(0).offsetHeight});
this.options.usePopupIframe?this.popupLayer.append(this.popupIframe):null;
this.recalculatePopupIframe();
this.popupLayer.hide();
},
_loadOverlay:function(){ //加载遮罩
pageWidth = ($.browser.version=="6.0")?$(document).width()-21:$(document).width();
this.overlay?this.overlay.remove():null;
this.overlay = $(document.createElement("div"));
this.overlay.css({position:"absolute","z-index":1,left:0,top:0,zoom:1,display:"none",width:pageWidth,height:$(document).height()}).appendTo($(document.body)).append("<div style='position:absolute;z-index:2;width:100%;height:100%;left:0;top:0;opacity:0.3;filter:Alpha(opacity=30);background:#000'></div><iframe frameborder='0' border='0' style='width:100%;height:100%;position:absolute;z-index:1;left:0;top:0;filter:Alpha(opacity=0);'></iframe>")
},
doresize:function(){
this.overlay?this.overlay.css({width:($.browser.version=="6.0")?$(document).width()-21:$(document).width(),height:($.browser.version=="6.0")?$(document).height()-4:$(document).height()}):null;
if(this.isSetPosition){
this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);
}
},
setPosition:function(left,top){ //通过传入的参数值改变弹出层的位置
this.popupLayer.css({left:left,top:top});
},
doEffects:function(way){ //做特效
way == "open"?this.popupLayer.show("slow"):this.popupLayer.hide("slow");
},
recalculatePopupIframe:function(){ //重绘popupIframe,这个不知怎么改进,只好先用这个笨办法。
this.popupIframe.css({position:"absolute",'z-index':-1,left:0,top:0,opacity:0,width:this.popupBlk.get(0).offsetWidth,height:this.popupBlk.get(0).offsetHeight});
},
close:function(){ //关闭方法
this.options.useOverlay?this.overlay.hide():null;
this.options.useFx?this.doEffects("close"):this.popupLayer.hide();
}
});
body, ul, li, div, h1, h2{padding:0;margin:0;}
ul{list-style:none;}
a{text-decoration:none;}
.clr{clear:both;overflow:hidden;height:0;}
a.closeBtn{position:absolute;top:10px;right:10px;display:block;width:60px;padding:4px 0;text-align:center;background:#fff;border:1px solid #85B6E2;color:#333;}
a.closeBtn:hover{color:#fff;border:1px solid #85B6E2;background:#85B6E2;}
body{padding:10px 20px 200px;}
h1{color:#85B6E2;text-align:center;padding-top:20px;}
.example{border:1px dashed #ccc;padding:40px;margin-top:10px;zoom:1;}
.example .description{color:#85B6E2;float:left;padding:10px 20px 0 80px;font-size:20px;}
.example .tigger{display:block;width:80px;padding:10px;text-align:center;background:#fff;border:1px solid #999;color:#333;cursor:pointer;float:left;}
.example select{margin-top:10px;}
.blk{width:500px;position:relative;}
.blk .head, .blk .head-right, .blk .foot, .blk .foot-right{background:url(images/pop_up_bg.png);overflow:hidden;height:4px;}
.blk .head{padding-left:4px;}
.blk .head-right{background-position:right top;}
.blk .foot{padding-left:4px;background-position:left bottom;_height:3px;}
.blk .foot-right{background-position:right bottom;}
.blk .main{border-left:2px solid #85B6E2;border-right:2px solid #85B6E2;position:relative;background:#fff;}
.blk .main h2{font:bold 16px "Microsoft YaHei";padding:10px 20px 2px;color:#85B6E2;}
.blk .main ul{padding:20px;zoom:1;overflow:hidden;font-size:12px;}
.blk .main ul li{float:left;width:100px;text-align:center;line-height:30px;margin-bottom:10px;}
.blk .main ul li a{color:#333;display:block;}
.blk .main ul li a:hover{background:#85B6E2;color:#fff;font-weight:bold;font-size:14px;}
/* 自定义样式 */
.t5 .blk{width:700px;}
.t5 .blk h2{color:#aaa;}
.t5 .blk .main ul li a{color:#aaa;}
.t5 .blk .head, .t5 .blk .head-right, .t5 .blk .foot, .t5 .blk .foot-right{background:url(images/pop_up_bg2.png);}
/**/
* html .popup_iframe{
width:expression(this.previousSibling.style.width);
height:expression(this.previousSibling.style.height);
}
<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>test</title>
<link href="styles/core.css" type="text/css" rel="stylesheet"/>
<script src="scripts/jquery.1.3.2.js" type="text/javascript" language="javascript"></script>
<script src="scripts/popup_layer.js" type="text/javascript" language="javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
new PopupLayer({trigger:"#btn_Functions",popupBlk:"#div_Functions",closeBtn:"#cle_Functions",useOverlay:true});
});
</script>
</head>
<body>
<h1>JS前段备用</h1>
<div id="div_BasFunctions" class="example">
<input id="btn_Functions" type="button" value="选择/修改" class="search-list-off" onmouseover="this.className='search-list-off-hover';" onmouseout="this.className='search-list-off';"/>
<div id="div_Functions" class="blk" style="display:none;width:800px;">
<div class="main">
<table style="width:99%;padding:5;" id="tab_Functions">
<tr>
<td style="width:20%;">已选职能:</td>
<td style="width:60%;" colspan="3"><span id="sp_FunctionsContent" style="font-weight:bold; font-size:14px;"></span></td>
<td style="width:20%;" align="right"><a href="javascript:void(0)" id="cle_Functions">[确定]</a></td>
</tr>
<tr>
<td><input type='checkbox' id='11' onclick='cb_Selected(this)' value='计算机软件' style='display:none;'/>
<span id='sp_Test11' onMouseover="new PopupLayer({trigger:'#sp_Test11',popupBlk:'#div_Sub11',eventType:'mouseover',closeLayout:'#div_Sub11,onBeforeShow:beforeShow'});">计算机软件</span>
<div id='div_Sub11' class='blk' style='display:none; width:160px;' >
<div class='main'>
<table style='width:99%;' id='tab_11'>
<tr><td><input type='checkbox' id='Checkbox1' onclick='cb_Selected(this)' value='计算机软件'/>计算机软件</td></tr>
<tr><td><input type='checkbox' id='1101' onclick='cb_Selected(this)' value='高级软件工程师'/>高级软件工程师</td></tr>
<tr><td><input type='checkbox' id='1102' onclick='cb_Selected(this)' value='软件工程师'/>软件工程师</td></tr>
<tr><td><input type='checkbox' id='1103' onclick='cb_Selected(this)' value='数据库工程师/管理员'/>数据库工程师/管理员</td></tr>
<tr><td><input type='checkbox' id='1104' onclick='cb_Selected(this)' value='ERP技术开发(ORACLE/SAP)'/>ERP技术开发(ORACLE/SAP)</td></tr>
<tr><td><input type='checkbox' id='1105' onclick='cb_Selected(this)' value='系统分析员'/>系统分析员</td></tr>
<tr><td><input type='checkbox' id='1106' onclick='cb_Selected(this)' value='系统工程师'/>系统工程师</td></tr>
<tr><td><input type='checkbox' id='1107' onclick='cb_Selected(this)' value='系统集成工程师'/>系统集成工程师</td></tr>
<tr><td><input type='checkbox' id='1108' onclick='cb_Selected(this)' value='计算机辅助设计工程师'/>计算机辅助设计工程师</td></tr>
<tr><td><input type='checkbox' id='1109' onclick='cb_Selected(this)' value='其他'/>其他</td></tr>
<tr><td><input type='checkbox' id='1110' onclick='cb_Selected(this)' value='系统架构设计师'/>系统架构设计师</td></tr>
<tr><td><input type='checkbox' id='1111' onclick='cb_Selected(this)' value='软件UI设计师/工程师'/>软件UI设计师/工程师</td></tr>
<tr><td><input type='checkbox' id='1113' onclick='cb_Selected(this)' value='ERP实施顾问(ORACLE/SAP)'/>ERP实施顾问(ORACLE/SAP)</td></tr>
<tr><td><input type='checkbox' id='1114' onclick='cb_Selected(this)' value='需求工程师'/>需求工程师</td></tr>
<tr><td><input type='checkbox' id='1115' onclick='cb_Selected(this)' value='程序员'/>程序员</td></tr>
</table>
</div>
</div>
</td>
<td><input type='checkbox' id='12' onclick='cb_Selected(this)' value='销售管理' style='display:none;'/>
<span id='sp_Test12' onMouseover="new PopupLayer({trigger:'#sp_Test12',popupBlk:'#div_Sub12',eventType:'mouseover',closeLayout:'#div_Sub12,onBeforeShow:beforeShow'});">销售管理</span>
<div id='div_Sub12' class='blk' style='display:none; width:160px;' >
<div class='main'>
<table style='width:99%;' id='tab_12'>
<tr><td><input type='checkbox' id='Checkbox2' onclick='cb_Selected(this)' value='销售管理'/>销售管理</td></tr>
<tr><td><input type='checkbox' id='1201' onclick='cb_Selected(this)' value='销售总监'/>销售总监</td></tr>
<tr><td><input type='checkbox' id='1202' onclick='cb_Selected(this)' value='销售经理'/>销售经理</td></tr>
<tr><td><input type='checkbox' id='1203' onclick='cb_Selected(this)' value='销售主管'/>销售主管</td></tr>
<tr><td><input type='checkbox' id='1204' onclick='cb_Selected(this)' value='渠道/分销经理'/>渠道/分销经理</td></tr>
<tr><td><input type='checkbox' id='1205' onclick='cb_Selected(this)' value='客户经理/主管'/>客户经理/主管</td></tr>
<tr><td><input type='checkbox' id='1206' onclick='cb_Selected(this)' value='渠道/分销主管'/>渠道/分销主管</td></tr>
<tr><td><input type='checkbox' id='1207' onclick='cb_Selected(this)' value='区域销售经理'/>区域销售经理</td></tr>
<tr><td><input type='checkbox' id='1208' onclick='cb_Selected(this)' value='区域销售总监'/>区域销售总监</td></tr>
<tr><td><input type='checkbox' id='1209' onclick='cb_Selected(this)' value='商务专员/商务助理'/>商务专员/商务助理</td></tr>
<tr><td><input type='checkbox' id='1210' onclick='cb_Selected(this)' value='医药代表'/>医药代表</td></tr>
<tr><td><input type='checkbox' id='1211' onclick='cb_Selected(this)' value='其他'/>其他</td></tr>
<tr><td><input type='checkbox' id='1212' onclick='cb_Selected(this)' value='业务拓展主管/经理'/>业务拓展主管/经理</td></tr>
<tr><td><input type='checkbox' id='1213' onclick='cb_Selected(this)' value='业务主管'/>业务主管</td></tr>
<tr><td><input type='checkbox' id='1214' onclick='cb_Selected(this)' value='业务经理'/>业务经理</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
<script language="javascript">
var beforeShow=function(){
//查找所有popupLayer,除了#blk6的父元素,隐藏
//这里是重点,这里设置那个层不关闭
$('.popupLayer').not($('#blk6').parent()).hide();
};
$(document).ready(function() {
new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",eventType:"mouseover",closeLayout:'#blk6',onBeforeShow:beforeShow});
new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover",closeLayout:'#blk7',onBeforeShow:beforeShow});
new PopupLayer({trigger:"#ele8",popupBlk:"#blk8",closeBtn:"#close8",eventType:"mouseover",closeLayout:'#blk8',onBeforeShow:beforeShow});
new PopupLayer({trigger:"#ele9",popupBlk:"#blk9",closeBtn:"#close9",eventType:"mouseover",closeLayout:'#blk9',onBeforeShow:beforeShow});
});
</script>
options:{
trigger:null, //触发的元素或id,必填参数
popupBlk:null, //弹出内容层元素或id,必填参数
closeBtn:null, //关闭弹出层的元素或id
closeLayout:null,
popupLayerClass:"popupLayer", //弹出层容器的class名称
eventType:"click", //触发事件的类型
offsets:{ //弹出层容器位置的调整值
x:0,
y:0
},
useFx:false, //是否使用特效
useOverlay:false, //是否使用全局遮罩
usePopupIframe:true, //是否使用容器遮罩
isresize:true, //是否绑定window对象的resize事件
onBeforeShow:function(){}, //
onBeforeStart:function(){} //自定义事件
},
_init:function(options){
this.setOptions(options); //载入设置
this.isSetPosition = this.isDoPopup = this.isOverlay = true; //定义一些开关
this.popupLayer = $(document.createElement("div")).addClass(this.options.popupLayerClass); //初始化最外层容器
this.popupIframe = $(document.createElement("iframe")).attr({border:0,frameborder:0}); //容器遮罩,用于屏蔽ie6下的select
this.trigger = $(this.options.trigger); //把触发元素封装成实例的一个属性,方便使用及理解
this.popupBlk = $(this.options.popupBlk); //把弹出内容层元素封装成实例的一个属性
this.closeBtn = $(this.options.closeBtn); //把关闭按钮素封装成实例的一个属性
this.closeLayout=$(this.options.closeLayout); //
$(this).trigger("onBeforeStart"); //执行自定义事件。
this._construct() //通过弹出内容层,构造弹出层,即为其添加外层容器及底层iframe
this.trigger.bind(this.options.eventType,function(){ //给触发元素绑定触发事件
//$('.'+this.options.popupLayerClass).hide();
//取代隐藏所有层的代码,更改为自定义事件,在自定义事件中处理
$(this).trigger("onBeforeShow");
if(this.isSetPosition){
this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);
}
this.options.useOverlay?this._loadOverlay():null; //如果使用遮罩则加载遮罩元素
(this.isOverlay && this.options.useOverlay)?this.overlay.show():null;
if(this.isDoPopup && (this.popupLayer.css("display")== "none")){
this.options.useFx?this.doEffects("open"):this.popupLayer.show();
}
}.binding(this));
this.isresize?$(window).bind("resize",this.doresize.binding(this)):null;
this.options.closeBtn?this.closeBtn.bind("click",this.close.binding(this)):null; //如果有关闭按钮,则给关闭按钮绑定关闭事件
this.options.closeLayout?this.closeLayout.bind("mouseleave",this.close.binding(this)):null;
}
<h1>JS前段备用</h1>
<div id="emample6" class="example">
<div id="ele6" class="tigger">触发元素6</div><div class="description">示例6<br />new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",eventType:"mouseover",closeLayout:'#blk6'});
</div>
<div class="clr"></div>
<div id="blk6" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例6</h2>
<a href="javascript:void(0)" id="close6" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="emample7" class="example">
<div id="ele7" class="tigger">触发元素7</div><div class="description">示例7<br />new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover",closeLayout:'#blk7'});</div>
<div class="clr"></div>
<div id="blk7" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例6</h2>
<a href="javascript:void(0)" id="close7" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="emample8" class="example">
<div id="ele8" class="tigger">触发元素8</div><div class="description">示例8<br />new PopupLayer({trigger:"#ele8",popupBlk:"#blk8",closeBtn:"#close8",eventType:"mouseover",closeLayout:'#blk8'});</div>
<div class="clr"></div>
<div id="blk8" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例8</h2>
<a href="javascript:void(0)" id="close8" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="emample9" class="example">
<div id="ele9" class="tigger">触发元素9</div><div class="description">示例9<br />new PopupLayer({trigger:"#ele9",popupBlk:"#blk9",closeBtn:"#close9",eventType:"mouseover",closeLayout:'#blk9'});</div>
<div class="clr"></div>
<div id="blk9" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例9</h2>
<a href="javascript:void(0)" id="close8" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
options:{
trigger:null, //触发的元素或id,必填参数
popupBlk:null, //弹出内容层元素或id,必填参数
closeBtn:null, //关闭弹出层的元素或id
closeLayout:null,
popupLayerClass:"popupLayer", //弹出层容器的class名称
eventType:"click", //触发事件的类型
offsets:{ //弹出层容器位置的调整值
x:0,
y:0
},
useFx:false, //是否使用特效
useOverlay:false, //是否使用全局遮罩
usePopupIframe:true, //是否使用容器遮罩
isresize:true, //是否绑定window对象的resize事件
onBeforeShow:function(){}, //
onBeforeStart:function(){} //自定义事件
},
_init:function(options){
this.setOptions(options); //载入设置
this.isSetPosition = this.isDoPopup = this.isOverlay = true; //定义一些开关
this.popupLayer = $(document.createElement("div")).addClass(this.options.popupLayerClass); //初始化最外层容器
this.popupIframe = $(document.createElement("iframe")).attr({border:0,frameborder:0}); //容器遮罩,用于屏蔽ie6下的select
this.trigger = $(this.options.trigger); //把触发元素封装成实例的一个属性,方便使用及理解
this.popupBlk = $(this.options.popupBlk); //把弹出内容层元素封装成实例的一个属性
this.closeBtn = $(this.options.closeBtn); //把关闭按钮素封装成实例的一个属性
this.closeLayout=$(this.options.closeLayout); //
$(this).trigger("onBeforeStart"); //执行自定义事件。
this._construct() //通过弹出内容层,构造弹出层,即为其添加外层容器及底层iframe
this.trigger.bind(this.options.eventType,function(){ //给触发元素绑定触发事件
//$('.'+this.options.popupLayerClass).hide();
//取代隐藏所有层的代码,更改为自定义事件,在自定义事件中处理
$(this).trigger("onBeforeShow");
if(this.isSetPosition){
this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);
}
this.options.useOverlay?this._loadOverlay():null; //如果使用遮罩则加载遮罩元素
(this.isOverlay && this.options.useOverlay)?this.overlay.show():null;
if(this.isDoPopup && (this.popupLayer.css("display")== "none")){
this.options.useFx?this.doEffects("open"):this.popupLayer.show();
}
}.binding(this));
this.isresize?$(window).bind("resize",this.doresize.binding(this)):null;
this.options.closeBtn?this.closeBtn.bind("click",this.close.binding(this)):null; //如果有关闭按钮,则给关闭按钮绑定关闭事件
this.options.closeLayout?this.closeLayout.bind("mouseleave",this.close.binding(this)):null;
}
<script language="javascript">
var beforeShow=function(){
//查找所有popupLayer,除了#blk6的父元素,隐藏
$('.popupLayer').not($('#blk6').parent()).hide();
};
$(document).ready(function() {
new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",eventType:"mouseover",closeLayout:'#blk6',onBeforeShow:beforeShow});
new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover",closeLayout:'#blk7',onBeforeShow:beforeShow});
new PopupLayer({trigger:"#ele8",popupBlk:"#blk8",closeBtn:"#close8",eventType:"mouseover",closeLayout:'#blk8',onBeforeShow:beforeShow});
new PopupLayer({trigger:"#ele9",popupBlk:"#blk9",closeBtn:"#close9",eventType:"mouseover",closeLayout:'#blk9',onBeforeShow:beforeShow});
});
</script>
_init:function(options){
this.setOptions(options); //载入设置
this.isSetPosition = this.isDoPopup = this.isOverlay = true; //定义一些开关
this.popupLayer = $(document.createElement("div")).addClass(this.options.popupLayerClass); //初始化最外层容器
this.popupIframe = $(document.createElement("iframe")).attr({border:0,frameborder:0}); //容器遮罩,用于屏蔽ie6下的select
this.trigger = $(this.options.trigger); //把触发元素封装成实例的一个属性,方便使用及理解
this.popupBlk = $(this.options.popupBlk); //把弹出内容层元素封装成实例的一个属性
this.closeBtn = $(this.options.closeBtn); //把关闭按钮素封装成实例的一个属性
this.closeLayout=$(this.options.closeLayout); //
$(this).trigger("onBeforeStart"); //执行自定义事件。
this._construct() //通过弹出内容层,构造弹出层,即为其添加外层容器及底层iframe
this.trigger.bind(this.options.eventType,function(){ //给触发元素绑定触发事件
$('.'+this.options.popupLayerClass).hide();
if(this.isSetPosition){
this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);
}
this.options.useOverlay?this._loadOverlay():null; //如果使用遮罩则加载遮罩元素
(this.isOverlay && this.options.useOverlay)?this.overlay.show():null;
if(this.isDoPopup && (this.popupLayer.css("display")== "none")){
this.options.useFx?this.doEffects("open"):this.popupLayer.show();
}
}.binding(this));
this.isresize?$(window).bind("resize",this.doresize.binding(this)):null;
this.options.closeBtn?this.closeBtn.bind("click",this.close.binding(this)):null; //如果有关闭按钮,则给关闭按钮绑定关闭事件
this.options.closeLayout?this.closeLayout.bind("mouseleave",this.close.binding(this)):null;
}
<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>test</title>
<link href="styles/core.css" type="text/css" rel="stylesheet"/>
<script src="scripts/jquery.1.3.2.js" type="text/javascript" language="javascript"></script>
<script src="scripts/popup_layer.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
$(document).ready(function() {
new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",eventType:"mouseover",closeLayout:'#blk6'});
new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover",closeLayout:'#blk7'});
});
</script>
</head>
<body>
<h1>JS前段备用</h1>
<div id="emample6" class="example">
<div id="ele6" class="tigger">触发元素6</div><div class="description">示例6<br />new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",eventType:"mouseover",closeLayout:'#blk6'});
</div>
<div class="clr"></div>
<div id="blk6" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例6</h2>
<a href="javascript:void(0)" id="close6" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
<div id="emample7" class="example">
<div id="ele7" class="tigger">触发元素7</div><div class="description">示例7<br />new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover",closeLayout:'#blk7'});</div>
<div class="clr"></div>
<div id="blk7" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<h2>示例6</h2>
<a href="javascript:void(0)" id="close7" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="#">项目6</a></li>
<li><a href="#">项目7</a></li>
<li><a href="#">项目8</a></li>
<li><a href="#">项目9</a></li>
<li><a href="#">项目10</a></li>
<li><a href="#">项目11</a></li>
<li><a href="#">项目12</a></li>
</ul>
</div>
<div class="foot"><div class="foot-right"></div></div>
</div>
</div>
</body>
</html>
Function.prototype.binding = function() {
if (arguments.length < 2 && typeof arguments[0] == "undefined") return this;
var __method = this, args = jQuery.makeArray(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat(jQuery.makeArray(arguments)));
}
}
var Class = function(subclass){
subclass.setOptions = function(options){
this.options = jQuery.extend({}, this.options,options);
for(var key in options){
if(/^on[A-Z][A-Za-z]*$/.test(key)){
$(this).bind(key,options[key]);
}
}
}
var fn = function(){
if(subclass._init && typeof subclass._init == 'function'){
this._init.apply(this,arguments);
}
}
if(typeof subclass == 'object'){
fn.prototype = subclass;
}
return fn;
}
var PopupLayer = new Class({
options:{
trigger:null, //触发的元素或id,必填参数
popupBlk:null, //弹出内容层元素或id,必填参数
closeBtn:null, //关闭弹出层的元素或id
closeLayout:null,
popupLayerClass:"popupLayer", //弹出层容器的class名称
eventType:"click", //触发事件的类型
offsets:{ //弹出层容器位置的调整值
x:0,
y:0
},
useFx:false, //是否使用特效
useOverlay:false, //是否使用全局遮罩
usePopupIframe:true, //是否使用容器遮罩
isresize:true, //是否绑定window对象的resize事件
onBeforeStart:function(){} //自定义事件
},
_init:function(options){
this.setOptions(options); //载入设置
this.isSetPosition = this.isDoPopup = this.isOverlay = true; //定义一些开关
this.popupLayer = $(document.createElement("div")).addClass(this.options.popupLayerClass); //初始化最外层容器
this.popupIframe = $(document.createElement("iframe")).attr({border:0,frameborder:0}); //容器遮罩,用于屏蔽ie6下的select
this.trigger = $(this.options.trigger); //把触发元素封装成实例的一个属性,方便使用及理解
this.popupBlk = $(this.options.popupBlk); //把弹出内容层元素封装成实例的一个属性
this.closeBtn = $(this.options.closeBtn); //把关闭按钮素封装成实例的一个属性
this.closeLayout=$(this.options.closeLayout); //
$(this).trigger("onBeforeStart"); //执行自定义事件。
this._construct() //通过弹出内容层,构造弹出层,即为其添加外层容器及底层iframe
this.trigger.bind(this.options.eventType,function(){ //给触发元素绑定触发事件
if(this.isSetPosition){
this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);
}
this.options.useOverlay?this._loadOverlay():null; //如果使用遮罩则加载遮罩元素
(this.isOverlay && this.options.useOverlay)?this.overlay.show():null;
if(this.isDoPopup && (this.popupLayer.css("display")== "none")){
this.options.useFx?this.doEffects("open"):this.popupLayer.show();
}
}.binding(this));
this.isresize?$(window).bind("resize",this.doresize.binding(this)):null;
this.options.closeBtn?this.closeBtn.bind("click",this.close.binding(this)):null; //如果有关闭按钮,则给关闭按钮绑定关闭事件
this.options.closeLayout?this.closeLayout.bind("mouseleave",this.close.binding(this)):null;
},
_construct:function(){ //构造弹出层
this.popupBlk.show();
this.popupLayer.append(this.popupBlk.css({opacity:1})).appendTo($(document.body)).css({position:"absolute",'z-index':2,width:this.popupBlk.get(0).offsetWidth,height:this.popupBlk.get(0).offsetHeight});
this.options.usePopupIframe?this.popupLayer.append(this.popupIframe):null;
this.recalculatePopupIframe();
this.popupLayer.hide();
},
_loadOverlay:function(){ //加载遮罩
pageWidth = ($.browser.version=="6.0")?$(document).width()-21:$(document).width();
this.overlay?this.overlay.remove():null;
this.overlay = $(document.createElement("div"));
this.overlay.css({position:"absolute","z-index":1,left:0,top:0,zoom:1,display:"none",width:pageWidth,height:$(document).height()}).appendTo($(document.body)).append("<div style='position:absolute;z-index:2;width:100%;height:100%;left:0;top:0;opacity:0.3;filter:Alpha(opacity=30);background:#000'></div><iframe frameborder='0' border='0' style='width:100%;height:100%;position:absolute;z-index:1;left:0;top:0;filter:Alpha(opacity=0);'></iframe>")
},
doresize:function(){
this.overlay?this.overlay.css({width:($.browser.version=="6.0")?$(document).width()-21:$(document).width(),height:($.browser.version=="6.0")?$(document).height()-4:$(document).height()}):null;
if(this.isSetPosition){
this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);
}
},
setPosition:function(left,top){ //通过传入的参数值改变弹出层的位置
this.popupLayer.css({left:left,top:top});
},
doEffects:function(way){ //做特效
way == "open"?this.popupLayer.show("slow"):this.popupLayer.hide("slow");
},
recalculatePopupIframe:function(){ //重绘popupIframe,这个不知怎么改进,只好先用这个笨办法。
this.popupIframe.css({position:"absolute",'z-index':-1,left:0,top:0,opacity:0,width:this.popupBlk.get(0).offsetWidth,height:this.popupBlk.get(0).offsetHeight});
},
close:function(){ //关闭方法
this.options.useOverlay?this.overlay.hide():null;
this.options.useFx?this.doEffects("close"):this.popupLayer.hide();
}
});
<script language="javascript">
$(document).ready(function() {
new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",eventType:"mouseover",closeLayout:'#blk6'});
});
</script>