最近做了一个即时位置弹窗小功能,想到这个场景还是很常见的,所以就记录一下;
做完了后才发现,其实原理很简单,就是获取点击时的鼠标位置,left和top,完了最终赋值给弹窗坐标即可;
html部分
<input class="true" id="af607f85136d4daf87792348ec0fdc9b" name="hdfsUrl" onclick="stopTabTd(this)" value="sssss dd22asaaa44ttwss1" style=" width: 345px;">
关键点是上方传了一个this。通过这个this呢,可以获取到所有该标签属性。
function stopTabTd(e){
var value = e.getAttribute('value'); //获取上面value的值
var name = e.getAttribute('name');//获取上面name的值
var id = e.getAttribute('id');//获取上面id的值
$("#"+id).attr('onblur','shiqu("' + id + '","stopValue")');
var p = $(e).offset(); //获取鼠标坐标
layer.open({
type: 1,
title: name,
shadeClose: true,
closeBtn: 1,
shift:7,
anim: 1,//由上往下弹出
shade: 0.1,
resize:false,//禁止拉伸
move: false,//禁止拖拽
offset:[''+p.top+30+'px',''+p.left+'px'],//坐标
area: ['345px', '214px'], //宽高
skin: 'layui-layer-rim', //加上边框
content: $("#stopOpen")
});
}
相信大家还是很容易理解的,上面是采用的layer弹窗实现,具体还记录了几个参数注释,方便大家以后直接使用。
有问题记得留言,一起谈论。