jquery鼠标手触按钮弹出div 漂浮层 超出 屏幕
我做了一个jquery的div层，根据按钮的位置弹出这个div层显示，可是按钮比较靠右，一致，在屏幕右侧，div确也在按钮右侧显示，可是宽度超出了屏幕。请朋友们帮我解决一...
我做了一个jquery 的 div层，根据按钮的位置弹出这个div层显示，可是按钮比较靠右，一致，在屏幕右侧，div确也在按钮右侧显示，可是宽度超出了屏幕。请朋友们帮我解决一下。
jquery代码：
<script>
$(function(){
$("#pop_message_btn").hover(function(){$("#pop_message").toggle();},function(){ $("#pop_message").toggle();});
})
</script>
html：
<img id="pop_message_btn" src="images/help.png"/><div id="pop_message" style="display:none">要显示的层</div>
id="pop_message_btn" 是 触发按钮
请看图片 展开
jquery代码：
<script>
$(function(){
$("#pop_message_btn").hover(function(){$("#pop_message").toggle();},function(){ $("#pop_message").toggle();});
})
</script>
html：
<img id="pop_message_btn" src="images/help.png"/><div id="pop_message" style="display:none">要显示的层</div>
id="pop_message_btn" 是 触发按钮
请看图片 展开
4个回答
展开全部
这个比较复杂，说下思路：
当鼠标移动触发按钮上时，是计算安全位置，就是判断，鼠标所在坐标距屏幕右边的间距是否小于要显示的DIV的大小；如果小于，则重新定位这个DIV。如果大于或等于就显示在右边；所以这个关健在于这个大小计算。先取页面的整个宽度，然后获取鼠标X坐标。
整个宽度-鼠标的X座标 > DIV的宽度 ？ 在右边 ： 在左边
当鼠标移动触发按钮上时，是计算安全位置，就是判断，鼠标所在坐标距屏幕右边的间距是否小于要显示的DIV的大小；如果小于，则重新定位这个DIV。如果大于或等于就显示在右边；所以这个关健在于这个大小计算。先取页面的整个宽度，然后获取鼠标X坐标。
整个宽度-鼠标的X座标 > DIV的宽度 ？ 在右边 ： 在左边
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
测试过，这样就不会被拦截，IE和MYIE都不会：
<html>
<head>
<style>
</style>
<script language="javascript">
function showpos()
{
var pos=document.body.scrollTop;
pos=pos;
if(pos==0)
paddingB.style.display="none";
else
paddingB.style.display="block";
paddingB.style.height=pos+"px";
document.title=pos;
}
function closead()
{
addiv.style.display="none";
}
</script>
</head>
<body onscroll="javascript:showpos();" style="margin:0px">
<div id="addiv" style="position:absolute;top:200px;left:0px;width:100%;overflow:hidden;" align="center"><div id="paddingB" style="overflow:hidden;"></div><div style="font-size:12px;padding:2px;width:400px" align="right"><a href="javascript:closead();">关闭</a></div><iframe src="" scrolling="no" name="I1" border="0" frameborder="0" style="border:1px solid #ACACAC" width="400" height="300"></iframe></div>
<div style="height:1000px"></div>
</body>
</html>
<html>
<head>
<style>
</style>
<script language="javascript">
function showpos()
{
var pos=document.body.scrollTop;
pos=pos;
if(pos==0)
paddingB.style.display="none";
else
paddingB.style.display="block";
paddingB.style.height=pos+"px";
document.title=pos;
}
function closead()
{
addiv.style.display="none";
}
</script>
</head>
<body onscroll="javascript:showpos();" style="margin:0px">
<div id="addiv" style="position:absolute;top:200px;left:0px;width:100%;overflow:hidden;" align="center"><div id="paddingB" style="overflow:hidden;"></div><div style="font-size:12px;padding:2px;width:400px" align="right"><a href="javascript:closead();">关闭</a></div><iframe src="" scrolling="no" name="I1" border="0" frameborder="0" style="border:1px solid #ACACAC" width="400" height="300"></iframe></div>
<div style="height:1000px"></div>
</body>
</html>
追问
三楼的朋友可能没有明白的意思，我的意思是 鼠标 碰触 跟随鼠标位置 弹出 提示框，就跟 鼠标提示 信息一样，并不是你说的 弹出层提示对话框。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以考虑改变定位方式。
修改style="display:none"，加入
position:relative;
left:-100px;//不知道左移多少合适。
修改style="display:none"，加入
position:relative;
left:-100px;//不知道左移多少合适。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
left:-数值px;
建议你用JQUERY提示插件~~改变title样式
建议你用JQUERY提示插件~~改变title样式
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
