点击位置打开弹出窗口
[英]Open popup at clicked position
问题描述
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....... 你能检查一下吗.......
2 个解决方案
解决方案1
8 2012-05-08 05:23:07
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相关。所以使用：
$(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();
});
});
解决方案2
6 已采纳 2012-05-09 05:32:20
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.