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

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

做完了后才发现，其实原理很简单，就是获取点击时的鼠标位置，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弹窗实现，具体还记录了几个参数注释，方便大家以后直接使用。

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