本文介绍了在点击位置打开弹窗的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
你好，
我做了一个弹出窗口，默认情况下隐藏并在窗口上触发点击时打开.必须在触发事件的任何地方显示弹出窗口.但是有一些限制:
弹出窗口必须显示在当前可见窗口.意思是，如果我点击了窗口的最右侧，那么弹出窗口必须显示在点击位置的右侧以避免滚动.
李>如果窗口有滚动，无论是否滚动，它都应该显示在窗口的可见部分.
在我目前的代码中一切正常，除非窗口有滚动.如果向下滚动并单击窗口中间，则弹出窗口显示在窗口外当前显示区域......................................
<!DOCTYPE HTML PUBLIC><html><头><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><风格>分区{边框:1px 实心；背景:#ff9999;宽度:500 像素；高度:500 像素；显示:无；位置:绝对；}</风格><脚本>var mouseX,mouseY,windowWidth,windowHeight;var popupLeft,popupTop;$(文档).ready(函数(){$(文档).mousemove(函数(e){mouseX = e.pageX;鼠标Y = e.pageY;//获取相对位置如果(this.offsetLeft！=未定义)mouseX = e.pageX - this.offsetLeft;如果(this.offsetTop！=未定义)鼠标Y = e.pageY;- this.offsetTop;如果(鼠标 X <0)鼠标X = 0;如果(鼠标Y <0)鼠标Y = 0;windowWidth = $(window).width();windowHeight = $(window).height();});$('html').click(函数(){$('div').show();var popupWidth = $('div').outerWidth();var popupHeight = $('div').outerHeight();if(mouseX+popupWidth > 窗口宽度)popupLeft = mouseX-popupWidth;别的popupLeft = mouseX;if(mouseY+popupHeight > windowHeight)popupTop = mouseY-popupHeight;别的popupTop = mouseY;if(popupLeft < 0)弹出左= 0；如果(弹出顶部 <0)弹出顶部 = 0;$('div').offset({top:popupTop,left:popupLeft});});});</脚本></头><身体><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/>s dflasld fsadfsdfas dfsadf</div></身体></html>你能检查一下吗.......
解决方案 最后，我可以通过一些小的改动来完成它......这是一段运行良好的代码......
<html><头><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><风格>分区{边框:1px 实心；背景:#ff9999;宽度:500 像素；高度:500 像素；显示:无；位置:绝对；}</风格><脚本>var mouseX,mouseY,windowWidth,windowHeight;var popupLeft,popupTop;$(文档).ready(函数(){$(文档).mousemove(函数(e){mouseX = e.pageX;鼠标Y = e.pageY;//获取相对位置如果(this.offsetLeft！=未定义)mouseX = e.pageX - this.offsetLeft;如果(this.offsetTop！=未定义)鼠标Y = e.pageY;- this.offsetTop;如果(鼠标 X <0)鼠标X = 0;如果(鼠标Y <0)鼠标Y = 0;windowWidth = $(window).width()+$(window).scrollLeft();windowHeight = $(window).height()+$(window).scrollTop();});$('html').click(函数(){$('div').show();var popupWidth = $('div').outerWidth();var popupHeight = $('div').outerHeight();if(mouseX+popupWidth > 窗口宽度)popupLeft = mouseX-popupWidth;别的popupLeft = mouseX;if(mouseY+popupHeight > windowHeight)popupTop = mouseY-popupHeight;别的popupTop = mouseY;if(popupLeft < $(window).scrollLeft()){popupLeft = $(window).scrollLeft();}if(popupTop < $(window).scrollTop()){popupTop = $(window).scrollTop();}如果(popupLeft < 0 || popupLeft == 未定义)弹出左= 0；如果(popupTop < 0 || popupTop == 未定义)弹出顶部 = 0;$('div').offset({top:popupTop,left:popupLeft});});});</脚本></头><身体><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/>s dflasld fsadfsdfas dfsadf</div></身体></html>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.......
解决方案 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>
这篇关于在点击位置打开弹窗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
The End
相关推荐
业务场景：使用update语句去更新数据库字段。 原因：update接收值不正确。原来代码： $query = "UPDATE student SET date = now() WHERE id = $id";$result = $mysqli-query($query2) or die($mysqli-error); // 问题出现了在这句 $data = $result-fetch_ass...
2024-12-13
前端开发问题
136
具体实现代码如下： laydate.render({ elem: '#start_time', min:0, //,type: 'date' //默认，可不填}); 只要加一个min参数，就可以控制了。0表示之前的日期不可...
2024-11-29
前端开发问题
133
ajax请求获取json数据并处理的实例代码 $.ajax({ type: 'GET', url: 'https://localhost:44369/UserInfo/EditUserJson',//请求数据 data: json,//传递数据 //dataType:'json/text',//预计服务器返回的类型 timeout: 3000,//请求超时的时间 //回调函数传参 suc...
2024-11-22
前端开发问题
215
在JavaScript中，我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例： 1.使用splice()方法： let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22
前端开发问题
182
主页面上显示了一个合计，在删除和增加的时候需要更改这个总套数的值： //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后，...
2024-11-14
前端开发问题
156
1. 如果是ajax嵌套了 页面， 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09
前端开发问题
313
热门文章
1错误 [ERR_REQUIRE_ESM]:不支持 ES 模块的 require()
2vue中yarn install报错：info There appears to be trouble with you
3为什么 Chrome(在 Electron 内部)会突然重定向到 chrome-error://chromewebdat
4“aria-hidden 元素不包含可聚焦元素"显示模态时的问题
5使用选择器在 CSS 中选择元素的前一个兄弟
6js报错：Uncaught SyntaxError: Unexpected string
7layui怎么刷新当前页面？
8将模式设置为“no-cors"时使用 fetch 访问 API 时出错
热门精品源码
最新VIP资源
1多功能实用站长工具箱html功能模板
2多风格简历在线生成程序网页模板
3论文相似度查询系统源码
4响应式旅游景点宣传推广页面模板
5在线起名宣传推广网站源码
6酷黑微信小程序网站开发宣传页模板
7房产销售交易中介网站模板
8小学作业自动生成程序
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)