gpt4 book ai didi

javascript - 在点击位置打开弹出窗口

转载 作者:技术小花猫 更新时间:2023-10-29 12:40:09 25 4
gpt4 key购买 nike

你好,

我做了一个弹出窗口,默认情况下是隐藏的,只要在窗口上触发点击就会打开。弹出窗口必须在事件触发的任何地方显示。但是有一些限制:

  1. 弹出窗口必须显示在当前可见窗口。意思是,如果我在窗口的最右侧单击,则弹出窗口必须显示在单击位置的右侧以避免滚动。

    <
  2. 如果窗口有滚动,无论是否滚动,它都应该显示在窗口的可见部分。

在我目前的代码中一切都运行良好,除非在这种情况下,如果窗口有滚动。如果向下滚动并点击窗口中间,弹出窗口显示在当前显示区域的窗口外……………………

<!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>

你能检查一下吗......

最佳答案

也许您可以在初始时间加载 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();
});
});

关于javascript - 在点击位置打开弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10492910/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com