jtopo画布不够大时,操作弹框会显示在画布外面看不到的地方,还会使浏览器出现滚动条

在网上下的demo如果图标太靠右或太靠下,右键操作的时候弹框就会挤出页面,很丑,效果如下图所示:

jtopo画布不够大时,操作弹框会显示在画布外面看不到的地方,还会使浏览器出现滚动条

我想着给它修改成位置不够的时候显示在左边或者上面,去看源码的时候它是根据鼠标移入是那个距离屏幕上边和左边的一个点来定义它的位置的。

本来我想着看看能不能拿到到屏幕右边和下边的距离,但是一下两下没找到方法,后来就凭借我个人的想法想了一个比较懒的方法,就是获取浏览器的宽度和高度,用浏览器的宽度和高度减去源码中对应的event.pageX或event.pageY,具体如下:

源码:

$("#linkmenu").css({
        top:event.pageY,
         left:event.pageX
}).show();

我修改的:

// 修改鼠标右键点击时操作框出现的位置
$("#linkmenu").css({
    top:event.pageY-65,
    left:event.pageX-190
}).show();
// 页面宽度不够时显示
if ($(window).width()-event.pageX <= 190){
    $("#linkmenu").css({
        top:event.pageY-65,
        left:event.pageX-350
    }).show();
}
// 页面高度不够时显示
if ($(window).height()-event.pageY <= 150){
    $("#linkmenu").css({
        top:event.pageY-200,
        left:event.pageX-190
    }).show();
}
// console.log('宽',$(window).width()-event.pageX);
// console.log('高',$(window).height()-event.pageY);

其中减的数字都是通过我topo图标的大小,弹框的宽高自己设置的,可根据自己项目进行修改

修改后的效果如图所示:

jtopo画布不够大时,操作弹框会显示在画布外面看不到的地方,还会使浏览器出现滚动条