js实现点击某个按钮(事件)指定位置显示弹窗

深碍√TFBOYSˉ_ 2022-04-05 10:38 1111阅读 0赞

最近做了一个即时位置弹窗小功能，想到这个场景还是很常见的，所以就记录一下；

做完了后才发现，其实原理很简单，就是获取点击时的鼠标位置，left和top，完了最终赋值给弹窗坐标即可；

html部分

关键点是上方传了一个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弹窗实现，具体还记录了几个参数注释，方便大家以后直接使用。

有问题记得留言，一起谈论。