layui弹框在按钮的旁边

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

 

posted @ 2024-08-26 11:47  芬-mi  阅读(13)  评论(0)  编辑  收藏  举报