想让弹框随着按钮位置变化而变化,通过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