Javascript 在点击位置打开弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10492910/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open popup at clicked position
提问by Rama Rao M
Hi,
你好，
I have done a popup which is by default hidden and opened whenever a click is triggered on window. Popup must be shown at wherever the event is triggered.But there are some constraints:
我做了一个弹出窗口，默认情况下隐藏并在窗口上触发点击时打开。必须在触发事件的任何地方显示弹出窗口。但有一些限制：
Popup must be shown at current visible window.Meaning,If I clicked at right most part of the window then,popup must be shown to right side of the clicked position to avoid scrolling.
If window has scrolling, irrespective of scrolling it should be shown at visible part of the window.
弹出窗口必须显示在当前可见窗口中。意思是，如果我在窗口的最右侧单击，则弹出窗口必须显示在单击位置的右侧以避免滚动。
如果窗口有滚动，不管滚动它应该显示在窗口的可见部分。
Everything is working fine in my present code except in the case,if window has scrolling. If scroll down and click on the middle of the window, popup is displayed at out of the window current display area.........................
在我目前的代码中一切正常，除非窗口滚动。如果向下滚动并单击窗口中间，则在窗口外当前显示区域显示弹出窗口......................................
<!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>
Can you please check it.......
请问可以查一下吗......
采纳答案by Rama Rao M
Finally, I could done it by having small changes...This is the piece of code that works fine...
最后，我可以通过一些小的改动来完成它......这是一段运行良好的代码......
<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>
回答by panda
maybe you can load the windowW/H in the init time and out of your function.
也许您可以在初始化时间和函数之外加载 windowW/H。
The concept is use the mouseY-scrolled high, because the mouseY is related to the body.so use this:
这个概念是使用 mouseY-scrolled high，因为 mouseY 与 body.so 相关，所以使用这个：
$(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();
});
});
