前几天看到论坛上Javascripters发的“3K的万能JQuery弹出层类库”http://topic.csdn.net/u/20100223/17/edb27cb3-24ff-461d-9cff-eb8b8816b6bf.html 觉得好用便拿来引用下,但是使用中遇到个问题。
在效果9里面,触发和弹出的层不能一一对应,具体体现为,在FF浏览器中,点击任何一个触发,都是所有层一起跳出来,而在IE中,点击任何一个触发,都是第一个层跳出来。本人新手,所以求大家帮助了:) 代码如下
<!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>jQuery弹出层</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() {
//示例9,综合效果
var t9 = new PopupLayer({trigger:"#ele1,#ele2",popupBlk:"#blk1,#blk2",closeBtn:"#close1,#close2",useOverlay:true,useFx:true,
offsets:{
x:0,
y:-41
}
});
t9.doEffects = function(way){
if(way == "open"){
this.popupLayer.css({opacity:0.3}).show(400,function(){
this.popupLayer.animate({
left:($(document).width() - this.popupLayer.width())/2,
top:(document.documentElement.clientHeight - this.popupLayer.height())/2 + $(document).scrollTop(),
opacity:0.8
},1000,function(){this.popupLayer.css("opacity",1)}.binding(this));
}.binding(this));
}
else{
this.popupLayer.animate({
left:this.trigger.offset().left,
top:this.trigger.offset().top,
opacity:0.1
},{duration:500,complete:function(){this.popupLayer.css("opacity",1);this.popupLayer.hide()}.binding(this)});
}
}
});
</script>
</head>
<body>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<table width="1000" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="69%"> </td>
<td width="400">
<div id="emample" class="example">
<div id="ele1" class="tigger"> 触发元素9</div>
<div id="blk1" 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="close1" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目111</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="emample1" class="example">
<p> </p>
<div id="ele2" class="tigger">触发元素10</div>
<div id="blk2" 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="close2" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2222</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>
</td>
</tr>
<tr>
<td> </td>
<td width="400">400</td>
</tr>
</table>
</body>
</html>popup_layer 文件和jquery.1.3.2文件均没修改有兴趣帮忙的朋友最好留下联系方式便于交流:)
在效果9里面,触发和弹出的层不能一一对应,具体体现为,在FF浏览器中,点击任何一个触发,都是所有层一起跳出来,而在IE中,点击任何一个触发,都是第一个层跳出来。本人新手,所以求大家帮助了:) 代码如下
<!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>jQuery弹出层</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() {
//示例9,综合效果
var t9 = new PopupLayer({trigger:"#ele1,#ele2",popupBlk:"#blk1,#blk2",closeBtn:"#close1,#close2",useOverlay:true,useFx:true,
offsets:{
x:0,
y:-41
}
});
t9.doEffects = function(way){
if(way == "open"){
this.popupLayer.css({opacity:0.3}).show(400,function(){
this.popupLayer.animate({
left:($(document).width() - this.popupLayer.width())/2,
top:(document.documentElement.clientHeight - this.popupLayer.height())/2 + $(document).scrollTop(),
opacity:0.8
},1000,function(){this.popupLayer.css("opacity",1)}.binding(this));
}.binding(this));
}
else{
this.popupLayer.animate({
left:this.trigger.offset().left,
top:this.trigger.offset().top,
opacity:0.1
},{duration:500,complete:function(){this.popupLayer.css("opacity",1);this.popupLayer.hide()}.binding(this)});
}
}
});
</script>
</head>
<body>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<table width="1000" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="69%"> </td>
<td width="400">
<div id="emample" class="example">
<div id="ele1" class="tigger"> 触发元素9</div>
<div id="blk1" 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="close1" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目111</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="emample1" class="example">
<p> </p>
<div id="ele2" class="tigger">触发元素10</div>
<div id="blk2" 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="close2" class="closeBtn">关闭</a>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2222</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>
</td>
</tr>
<tr>
<td> </td>
<td width="400">400</td>
</tr>
</table>
</body>
</html>popup_layer 文件和jquery.1.3.2文件均没修改有兴趣帮忙的朋友最好留下联系方式便于交流:)
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货