想让弹框随着按钮位置变化而变化，通过offset设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.9.8/css/layui.min.css"
/>
<style>
li {
height: 120px;
}
.div2{
position: absolute;
top: 0;
right: 0;
}
.div3{
position: absolute;
bottom: 0;
left: 0;
}
.div4{
position: absolute;
bottom: 0;
right: 0;
}
.div5{
position: absolute;
bottom: 40%;
left: 40%;
}
</style>
</head>
<body>
<div>
<button class="myButton div1" class="layui-btn">点击我1</button>
</div>
<div>
<button class="myButton div2" class="layui-btn">点击我2</button>
</div>
<div>
<button class="myButton div3" class="layui-btn">点击我3</button>
</div>
<div>
<button class="myButton div4" class="layui-btn">点击我4</button>
</div>
<div>
<button class="myButton div5" class="layui-btn">点击我5</button>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.9.8/layui.js"></script>
<script>
layui.use(["form", "layer"], function () {
$(".myButton").on("click", function () {
var offset = $(this).offset();
var left = offset.left - 250;
if (offset.left <=0) {
left = offset.left + 60;
}
var top = offset.top-150;
if(top<=0){
top=offset.top
}
console.log(top, left);
layer.confirm(
"确定要执行此操作吗？",
{
title:'<span style="color:red;">少发<span>',
btn: ["确定", "取消"], //按钮
shade: 0,
offset: [top + "px", left + "px"], // 设置确认框的位置
area:["250px",'160px'],
icon:3
},
function (index) {
layer.close(index);
layer.msg("操作已确认");
},
function () {
layer.msg("操作已取消");
}
);
});
});
</script>
</html>
也可以对这个功能进行封装
function positionConfirm(elem,title,content,callback){
var offset = $(elem).offset();
var left = offset.left - 265;
if (offset.left <=0) {
left = offset.left + 60;
}
var top = offset.top-150;
if(top<=0){
top=offset.top
}
let title_html= `<span style="font-weight:600;">${title}</span>`;
layer.confirm(content,
{
title:title_html,
btn: ["确定", "取消"], //按钮
shade: 0,
offset: [top + "px", left + "px"], // 设置确认框的位置
area:['265px','160px'],
icon:3
},
function (index) {
//点击确定按钮，执行后续其他操作（callback）
callback()
layer.close(index);
}
);
}
标签：function,layer,layui,offset,弹框,点击,按钮,left From： https://www.cnblogs.com/zhaofen/p/18380716