Javascript 用于弹出窗口定位的动态浏览器窗口边缘检测

Javascript 用于弹出窗口定位的动态浏览器窗口边缘检测,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我有一个可访问的jQuery popover文本小部件,它就像单击文本链接时的词汇表工具提示一样,使用这个CSS(最相关的代码段) .a11y流行区{ 位置:绝对位置; 显示:内联块; 宽度:15em; 填充:1em; 背景色:#f9f9f9; 边框:1px实心#3e3935; 边界半径:5px; 盒影:4px 3px 4px rgba(0,0,0.25); z指数:100; } 这个JavaScript(最相关的代码片段)用于构建小部件 this.$region=$(“”) .prop(“i

我有一个可访问的jQuery popover文本小部件,它就像单击文本链接时的词汇表工具提示一样,使用这个CSS(最相关的代码段)

.a11y流行区{
位置:绝对位置;
显示:内联块;
宽度:15em;
填充:1em;
背景色:#f9f9f9;
边框:1px实心#3e3935;
边界半径:5px;
盒影:4px 3px 4px rgba(0,0,0.25);
z指数:100;
}
这个JavaScript(最相关的代码片段)用于构建小部件

this.$region=$(“”)
.prop(“id”,this.id+“-区域”)
.addClass(“a11y popover区域”)
.html(dataProp)
.insertAfter(此.$trigger);
. . .
//获取区域维度
var regionDims={
宽度:此.$region.outerWidth(),
高度:此.$region.outerHeight(),
};
. . .
if(此.$trigger.hasClass(“a11y popover bottom”)){
此.region.addClass(“a11y popover bottom”).css({
底部:“-”+(regionDims.height+12)+“px”,
左:“-”+regionDims.width/3+“px”,
顶部:“未设置”,
右:“未设置”,
});
}
它工作得很好,因为“浮动”弹出窗口直接出现在链接文本的下方。除非触发链接文本太靠近浏览器窗口的边缘——当然,这是一个响应站点——在这种情况下,弹出窗口小部件窗口会离开屏幕边缘(如果链接位于最左侧,则会离开左侧;如果链接位于最右侧,则会离开右侧),小部件中的词汇表/工具提示文本只能部分读取

是否有一种方法可以检测小部件弹出窗口是否会出现在浏览器窗口的可见边缘附近,如果是的话,是否可以移动小部件窗口,以便无论发生什么情况,整个东西都留在浏览器窗口内