前几天看到论坛上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>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="1000" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="69%">&nbsp;</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>&nbsp;</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>&nbsp;</td>
    <td width="400">400</td>
  </tr>
</table>
</body>
</html>popup_layer 文件和jquery.1.3.2文件均没修改有兴趣帮忙的朋友最好留下联系方式便于交流:)