87,955
社区成员
发帖
与我相关
我的任务
分享页面中第一排的弹出框，会被浏览器盖住，这个要怎么解决呢...
<!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" />
<title>弹出信息框</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script type="text/javascript" src="js/limit_number_of_words.js"></script><!--限制文字字数-->
</head>
<body>
<script type="text/javascript">
$(function(){
var a;
$(".cover-list li ").hover(function(){
if(a){
window.clearTimeout(a)
}
var c=this;
var win_w = $(window).width();
a=window.setTimeout(function(){
var g=$(".detail-frame",c).html();
var i=$(">a",c).offset().left;
var h=$(">a",c).offset().top;
var LoR = i < win_w/2;
if($(c).width()==130){
var j=140
}else{
var j=$(">a",c).width()+10
}
$("body").append('<div class="detail-tip"></div>');
if($(c).hasClass("r-end")){
if(LoR){
$(".detail-tip").html(g).append('<span class="arrow-right"></span>').css("left",i+j-100).css("top",h);
}else{
$(".detail-tip").html(g).append('<span class="arrow-right"></span>').css("right",win_w-i+20).css("top",h);
$(".detail-tip").find(".xxk_jt").css({left:"auto",right:"-13px",transform:"rotate(180deg)"});
}
}else{
if(LoR){
$(".detail-tip").html(g).append('<span class="arrow-left"></span>').css("left",i+j).css("top",h);
}else{
$(".detail-tip").html(g).append('<span class="arrow-right"></span>').css("right",win_w-i+20).css("top",h);
$(".detail-tip").find(".xxk_jt").css({left:"auto",right:"-13px",transform:"rotate(180deg)"});
}
}
},200)
},function(){
if(a){
window.clearTimeout(a)
}
$(".detail-tip").remove()
});
});
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a, img {
border: 0;
}
body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
/* cover-list */
.cover-list {
width: 985px;
margin: 0 auto;
}
.cover-list li {
float: left;
display: inline;
width: 240px;
overflow: hidden;
margin-bottom: 30px;
}
/* detail-frame */
.detail-frame {
display: none;
}
.detail-tip {
position: absolute;
}
.xxk_jt {
float: left;
z-index: 99px;
position: absolute;
left: -3px;
}
.xxk_con {
box-shadow: 0px 0px 3px #91bfff;
float: left;
width: 270px;
height: 150px;
background: #ffffff;
border: 2px solid #5ea1ff;
padding: 15px;
padding-top: 8px;
margin-top: -35px;
margin-left: 10px;
border-radius: 5px;
-moz-border-radius: 5px;
}
.xxk_gsbt {
color: #292929;
font-size: 14px;
font-family: "微软雅黑";
margin-bottom: 10px;
font-weight: bolder;
}
.xxk_ezzw {
border-bottom: 1px solid #E7E7E7;
padding-bottom: 5px;
}
.xxk_ezzw_xx {
font-family: "宋体";
font-size: 12px;
font-weight: bolder;
color: #454545;
}
.xxk_ezzw_zw {
font-size: 12px;
font-family: "宋体";
}
.xxl_gsjj_bt {
margin-top: 8px;
font-family: "宋体";
font-size: 12px;
font-weight: bolder;
color:#454545;
}
.xxl_gsjj_con {
font-size: 12px;
text-overflow: -o-ellipsis-lastline;
-webkit-box-orient: vertical;
line-height: 20px;
text-indent: 24px;
margin-top: 5px;
color: #282828;
}
</style>
<div class="cover-list">
<ul>
<li>
<div class="detail-frame">
<div class="xxk_jt"><img src="images/jt.png" /></div>
<div class="xxk_con">
<div class="xxk_gsbt">郑州奥德利数控有限公司</div>
<div class="xxk_ezzw"><span class="xxk_ezzw_xx">热招职位：</span> <span class="xxk_ezzw_zw">销售 业务经理</span></div>
<div class="xxl_gsjj_bt">公司简介:</div>
<div class="xxl_gsjj_con"> 郑州奥德利数控设备有限公司是一家从事广告数控设备生产的企业，至今己发展成为集研发、生产、销
售为一体的高新技术企业。公司凭借公司是一家从事广告数控设备生产的企
业，至今己发展成为集研发、生产、销售为一体的高新技术企业。公司凭借雄厚的
经济和技术实力，全面公司是一家 </div>
</div>
</div>
<a href="#" target="_blank">郑州奥德利数控有限公司 </a> </li>
<li>
<div class="detail-frame">
<div class="xxk_jt"><img src="images/jt.png" /></div>
<div class="xxk_con">
<div class="xxk_gsbt">郑州奥德利数控有限公司</div>
<div class="xxk_ezzw"><span class="xxk_ezzw_xx">热招职位：</span> <span class="xxk_ezzw_zw">销售 业务经理</span></div>
<div class="xxl_gsjj_bt">公司简介:</div>
<div class="xxl_gsjj_con"> 郑州奥德利数控设备有限公司是一家从事广告数控设备生产的企业，至今己发展成为集研发、生产、销
售为一体的高新技术企业。公司凭借公司是一家从事广告数控设备生产的企
业，至今己发展成为集研发、生产、销售为一体的高新技术企业。公司凭借雄厚的
经济和技术实力，全面公司是一家 </div>
</div>
</div>
<a href="#" target="_blank">郑州奥德利数控有限公司</a> </li>
<li>
<div class="detail-frame">
<div class="xxk_jt"><img src="images/jt.png" /></div>
<div class="xxk_con">
<div class="xxk_gsbt">郑州奥德利数控有限公司</div>
<div class="xxk_ezzw"><span class="xxk_ezzw_xx">热招职位：</span> <span class="xxk_ezzw_zw">销售 业务经理</span></div>
<div class="xxl_gsjj_bt">公司简介:</div>
<div class="xxl_gsjj_con"> 郑州奥德利数控设备有限公司是一家从事广告数控设备生产的企业，至今己发展成为集研发、生产、销
售为一体的高新技术企业。公司凭借公司是一家从事广告数控设备生产的企
业，至今己发展成为集研发、生产、销售为一体的高新技术企业。公司凭借雄厚的
经济和技术实力，全面公司是一家 </div>
</div>
</div>
<a href="#" target="_blank">鼠标放上去会有弹出层 </a> </li>
<li>
<div class="detail-frame">
<div class="xxk_jt"><img src="images/jt.png" /></div>
<div class="xxk_con">
<div class="xxk_gsbt">郑州奥德利数控有限公司</div>
<div class="xxk_ezzw"><span class="xxk_ezzw_xx">热招职位：</span> <span class="xxk_ezzw_zw">销售 业务经理</span></div>
<div class="xxl_gsjj_bt">公司简介:</div>
<div class="xxl_gsjj_con"> 郑州奥德利数控设备有限公司是一家从事广告数控设备生产的企业，至今己发展成为集研发、生产、销
售为一体的高新技术企业。公司凭借公司是一家从事广告数控设备生产的企
业，至今己发展成为集研发、生产、销售为一体的高新技术企业。公司凭借雄厚的
经济和技术实力，全面公司是一家 </div>
</div>
</div>
<a href="#" target="_blank">鼠标放上去会有弹出层 </a> </li>
<li>
<div class="detail-frame">
<div class="xxk_jt"><img src="images/jt.png" /></div>
<div class="xxk_con">
<div class="xxk_gsbt">郑州奥德利数控有限公司</div>
<div class="xxk_ezzw"><span class="xxk_ezzw_xx">热招职位：</span> <span class="xxk_ezzw_zw">销售 业务经理</span></div>
<div class="xxl_gsjj_bt">公司简介:</div>
<div class="xxl_gsjj_con"> 郑州奥德利数控设备有限公司是一家从事广告数控设备生产的企业，至今己发展成为集研发、生产、销
售为一体的高新技术企业。公司凭借公司是一家从事广告数控设备生产的企
业，至今己发展成为集研发、生产、销售为一体的高新技术企业。公司凭借雄厚的
经济和技术实力，全面公司是一家 </div>
</div>
</div>
<a href="#" target="_blank">鼠标放上去会有弹出层 </a> </li>
<li>
<div class="detail-frame">
<div class="xxk_jt"><img src="images/jt.png" /></div>
<div class="xxk_con">
<div class="xxk_gsbt">郑州奥德利数控有限公司</div>
<div class="xxk_ezzw"><span class="xxk_ezzw_xx">热招职位：</span> <span class="xxk_ezzw_zw">销售 业务经理</span></div>
<div class="xxl_gsjj_bt">公司简介:</div>
<div class="xxl_gsjj_con"> 郑州奥德利数控设备有限公司是一家从事广告数控设备生产的企业，至今己发展成为集研发、生产、销
售为一体的高新技术企业。公司凭借公司是一家从事广告数控设备生产的企
业，至今己发展成为集研发、生产、销售为一体的高新技术企业。公司凭借雄厚的
经济和技术实力，全面公司是一家 </div>
</div>
</div>
<a href="#" target="_blank">鼠标放上去会有弹出层 </a> </li>
<li>
<div class="detail-frame">
<div class="xxk_jt"><img src="images/jt.png" /></div>
<div class="xxk_con">
<div class="xxk_gsbt">郑州奥德利数控有限公司</div>
<div class="xxk_ezzw"><span class="xxk_ezzw_xx">热招职位：</span> <span class="xxk_ezzw_zw">销售 业务经理</span></div>
<div class="xxl_gsjj_bt">公司简介:</div>
<div class="xxl_gsjj_con"> 郑州奥德利数控设备有限公司是一家从事广告数控设备生产的企业，至今己发展成为集研发、生产、销
售为一体的高新技术企业。公司凭借公司是一家从事广告数控设备生产的企
业，至今己发展成为集研发、生产、销售为一体的高新技术企业。公司凭借雄厚的
经济和技术实力，全面公司是一家 </div>
</div>
</div>
<a href="#" target="_blank">鼠标放上去会有弹出层 </a> </li>
<li>
<div class="detail-frame">
<div class="xxk_jt"><img src="images/jt.png" /></div>
<div class="xxk_con">
<div class="xxk_gsbt">郑州奥德利数控有限公司</div>
<div class="xxk_ezzw"><span class="xxk_ezzw_xx">热招职位：</span> <span class="xxk_ezzw_zw">销售 业务经理</span></div>
<div class="xxl_gsjj_bt">公司简介:</div>
<div class="xxl_gsjj_con"> 郑州奥德利数控设备有限公司是一家从事广告数控设备生产的企业，至今己发展成为集研发、生产、销
售为一体的高新技术企业。公司凭借公司是一家从事广告数控设备生产的企
业，至今己发展成为集研发、生产、销售为一体的高新技术企业。公司凭借雄厚的
经济和技术实力，全面公司是一家 </div>
</div>
</div>
<a href="#" target="_blank">鼠标放上去会有弹出层 </a> </li>
<li>
<div class="detail-frame">
<div class="xxk_jt"><img src="images/jt.png" /></div>
<div class="xxk_con">
<div class="xxk_gsbt">郑州奥德利数控有限公司</div>
<div class="xxk_ezzw"><span class="xxk_ezzw_xx">热招职位：</span> <span class="xxk_ezzw_zw">销售 业务经理</span></div>
<div class="xxl_gsjj_bt">公司简介:</div>
<div class="xxl_gsjj_con"> 郑州奥德利数控设备有限公司是一家从事广告数控设备生产的企业，至今己发展成为集研发、生产、销
售为一体的高新技术企业。公司凭借公司是一家从事广告数控设备生产的企
业，至今己发展成为集研发、生产、销售为一体的高新技术企业。公司凭借雄厚的
经济和技术实力，全面公司是一家 </div>
</div>
</div>
<a href="#" target="_blank">鼠标放上去会有弹出层 </a> </li>
</ul>
</div>
</body>
</html>
第一排的弹出框因为弹出的位置高了，所以被浏览器挡住了。这个要怎么在js的代码中添加获取浏览器的高度，而改变第一列的弹出位置？
浏览器内容会滚动，所以要是只改写第一行的代码是不行的，需要通过JS判断弹出框够不够显示内同，弹出内容要是上面不足时，会下降位置显示
...全文
请发表友善的回复…
发表回复
