layer消息框显示在鼠标旁边
layer因为操作简单,界面美观,是开发消息弹窗的不二选择。一般我们都会让消息框采用浮动效果显示在屏幕正中间,但是如果我们的需求是弹框显示在鼠标点击位置的左下角,而且是随滚动条移动的,就像bootstrap的popover组件,该如何实现呢。
ayer本身有很多操作参数,涉及定位的是offset参数,预设的有上下左右和四个边角,以及中间浮动。因为这几种预设都不能达到要求,只能使用自定义坐标来实现。
要实现这个需求首先要改动的是fixed参数,需要把原来的浮动效果去掉,所以fixed参数值设为false,接下来就是获得点击位置的坐标了。根据以往经验,x坐标取clientX也就是浏览器的x坐标位置,y坐标取pageY或者clientY+scrollY也就是文档y坐标。按预期设想,弹框会出现在点击位置的右下角位置。
但是,通过测试会发现结果并不如意。在纵向滚动条置顶时点击出现弹框是正常的,当拉下滚动条时就开始出现偏差,而且拉得越下偏差越大。经多次实验,发现原因是layer会自做聪明得把弹框位置在预定义值的基础上加上scrollY,相当于结果值多了一个scrollY值。这样事情就简单了,把多的值减掉。clientY+scrollY-scrollY=clientY。因此offset的y坐标值直接使用clientY。通过测试,弹框果然显示在了点击位置的右下角。
到这里离我们的目标只有一步之遥了,右下角到左下角差了一个消息框的宽度,而弹框宽度是自定义的,直接减掉ok。
$(".edit").click(function(e){ layer.open({ type: 1 ,area:"300px" ,offset: [e.clientY+"px",(e.clientX-310)+"px"] ,id: "layerDemo2"//防止重复弹出 ,content: $("#dialog") ,"fixed":false ,shade: 0 //不显示遮罩 ,yes: function(){ layer.closeAll(); } }); })