在点击位置打开弹窗
Posted
技术标签:
【中文标题】在点击位置打开弹窗【英文标题】：Open popup at clicked position 【发布时间】：2012-05-08 05:13:06 【问题描述】：嗨，
我做了一个弹出窗口，默认情况下隐藏并在窗口上触发点击时打开。必须在触发事件的任何地方显示弹出窗口。但是有一些限制：
弹出窗口必须显示在当前可见窗口。意思是，如果我点击了窗口的最右侧，那么弹出窗口必须显示在点击位置的右侧以避免滚动。
李>如果窗口有滚动，无论是否滚动，它都应显示在窗口的可见部分。
在我目前的代码中一切正常，除非窗口有滚动。 如果向下滚动并单击窗口中间，则弹出窗口显示在窗口外当前显示区域......................................
<!DOCTYPE html PUBLIC>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style>
div
border:1px solid;
background:#ff9999;
width:500px;
height:500px;
display:none;
position:absolute;
</style>
<script>
var mouseX,mouseY,windowWidth,windowHeight;
var popupLeft,popupTop;
$(document).ready(function()
$(document).mousemove(function(e)
mouseX = e.pageX;
mouseY = e.pageY;
//To Get the relative position
if( this.offsetLeft !=undefined)
mouseX = e.pageX - this.offsetLeft;
if( this.offsetTop != undefined)
mouseY = e.pageY; - this.offsetTop;
if(mouseX < 0)
mouseX =0;
if(mouseY < 0)
mouseY = 0;
windowWidth = $(window).width();
windowHeight = $(window).height();
);
$('html').click(function()
$('div').show();
var popupWidth = $('div').outerWidth();
var popupHeight = $('div').outerHeight();
if(mouseX+popupWidth > windowWidth)
popupLeft = mouseX-popupWidth;
else
popupLeft = mouseX;
if(mouseY+popupHeight > windowHeight)
popupTop = mouseY-popupHeight;
else
popupTop = mouseY;
if(popupLeft < 0)
popupLeft = 0;
if(popupTop < 0)
popupTop = 0;
$('div').offset(top:popupTop,left:popupLeft);
);
);
</script>
</head>
<body>
<br/><br/><br/> <br/><br/><br/><br/> <br/><br/> <br/> <br/> <br/> <br/> <br/> <br/>
<br/><br/> <br/> <br/> <br/> <br/><br/><br/> <br/><br/> <br/> <br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<div>
s dflasld fsadf
sdfas dfsadf
</div>
</body>
</html>
你能检查一下吗.......
【问题讨论】：
【参考方案1】：也许您可以在初始化时加载 windowW/H 并退出您的函数。
概念是使用mouseY-scrolled high，因为mouseY和body有关，所以使用这个：
$(document).ready(function()
$('html').click(function(e)
mouseX=e.pageX;
mouseY=e.pageY;
var bodyTop = document.documentElement.scrollTop + document.body.scrollTop;
..
//window.outerWidth is not working in IE
var windowWidth = $(window).outerWidth();
var windowHeight = $(window).outerHeight();
..
if(mouseY-bodyTop+popupHeight > windowHeight)
...
...
//set the position first. remove the position attr in css
$('div').css(position:"absolute",top:popupTop,left:popupLeft);
$('div').show();
);
);
【讨论】：
你在 IE9 中检查了吗？...K，你可以添加更多 BR 标签来滚动...请检查它添加一些 br 标签。 问题仍然存在。当我向下滚动并单击向下 300px 到窗口顶部时，弹出顶部的某些顶部隐藏在滚动后面。这实际上是应该避免的。 它现在可以工作了。跳跃的原因是你先显示 div。另外，offset 在 IE 中似乎不起作用，请改用 css。 window.outerWidth 也不能在 IE 中工作 哦，移除 mousemove 事件 你需要从你的原始文件中删除一些东西，确保变量是唯一的。【参考方案2】：最后，我可以通过做一些小的改动来做到这一点......这是一段运行良好的代码......
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style>
div
border:1px solid;
background:#ff9999;
width:500px;
height:500px;
display:none;
position:absolute;
</style>
<script>
var mouseX,mouseY,windowWidth,windowHeight;
var popupLeft,popupTop;
$(document).ready(function()
$(document).mousemove(function(e)
mouseX = e.pageX;
mouseY = e.pageY;
//To Get the relative position
if( this.offsetLeft !=undefined)
mouseX = e.pageX - this.offsetLeft;
if( this.offsetTop != undefined)
mouseY = e.pageY; - this.offsetTop;
if(mouseX < 0)
mouseX =0;
if(mouseY < 0)
mouseY = 0;
windowWidth = $(window).width()+$(window).scrollLeft();
windowHeight = $(window).height()+$(window).scrollTop();
);
$('html').click(function()
$('div').show();
var popupWidth = $('div').outerWidth();
var popupHeight = $('div').outerHeight();
if(mouseX+popupWidth > windowWidth)
popupLeft = mouseX-popupWidth;
else
popupLeft = mouseX;
if(mouseY+popupHeight > windowHeight)
popupTop = mouseY-popupHeight;
else
popupTop = mouseY;
if( popupLeft < $(window).scrollLeft())
popupLeft = $(window).scrollLeft();
if( popupTop < $(window).scrollTop())
popupTop = $(window).scrollTop();
if(popupLeft < 0 || popupLeft == undefined)
popupLeft = 0;
if(popupTop < 0 || popupTop == undefined)
popupTop = 0;
$('div').offset(top:popupTop,left:popupLeft);
);
);
</script>
</head>
<body>
<br/><br/><br/> <br/><br/><br/><br/> <br/><br/> <br/> <br/> <br/> <br/> <br/> <br/>
<br/><br/> <br/> <br/> <br/> <br/><br/><br/> <br/><br/> <br/> <br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div>
s dflasld fsadf
sdfas dfsadf
</div>
</body>
</html>
【讨论】：
以上是关于在点击位置打开弹窗的主要内容，如果未能解决你的问题，请参考以下文章