首页 > 其他分享 >layui弹框在按钮的旁边

layui弹框在按钮的旁边

时间:2024-08-26 11:47:53浏览次数:12  
标签:function layer layui offset 弹框 点击 按钮 left

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

相关文章

  • layui中layer.open改变第一个按钮的样式
    (1)改变所有弹框第一个按钮颜色,在css中操作.layui-layer-btn.layui-layer-btn0{background-color:#d3d3d3;/*灰色背景*/color:#000;/*按钮文字颜色*/} (2)只改变一个弹框按钮颜色,在success中操作success:function(layero){//在弹框打开后,选择按钮......
  • 点击屏幕新增一个按钮/图片等控件
    在日常代码编写中,有时候会遇到一些在页面中随机点击新增一个按钮,图片等控件或文字,此时我们需要用到如下代码代码如下html:js:1.先设置图片varimg=$('');img.attr('ID','myCarousels123');//设置图片源img.attr('src','/GateMana/FindImage?GateID='+obj.gateI......
  • JavaFX单选按钮
    单选按钮通常组合在一起,以便用户进行单选,即用户只能在单选按钮列表中选择一个项目。例如,当选择鞋子尺寸时,我们通常从列表中选择一个尺寸。单选按钮只能执行:选择或取消选择。以下代码显示,当放置在ToggleGroup中时,只能选择一个RadioButton。importjavafx.application.Applic......
  • 如何创建图片按钮
    文章目录1.概念介绍2.使用方法2.1filled风格2.2filledTonal风格2.3outlined风格3.代码与效果3.1示例代码3.2运行效果4.内容总结我们在上一章回中介绍了"如何修改NavigationBar组件的形状"相关的内容,本章回中将介绍IconButtion组件.闲话休提,让我们一起Talk......
  • 原神4.8版本重点培养和抽到角色数据表:修改了添加倒计时.隐藏了抽到角色数据表删除按钮
    <!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>原神4.8版本抽到角色和重点培养数据表<......
  • 解决element-plus中的el-dialog弹框覆盖editor富文本组件下拉框的问题
    <template><el-dialog:visible.sync="dialogFormVisible"><!--dialog内容--><button@click="dialog">打开富文本编辑器</button><tinymce-editorref="tinyEditor"/></el-dialog>&......
  • 基础组件:按钮
    Material组件库中提供了多种按钮组件如ElevatedButton、TextButton、OutlinedButton等,它们都是直接或间接对RawMaterialButton组件的包装定制,所以他们大多数属性都和RawMaterialButton一样。在介绍各个按钮时我们先介绍其默认外观,而按钮的外观大都可以通过属性来自定义,我们在后面......
  • 十五分钟两百行代码,手写一个vue项目全局通用的弹框
    前言:我们在写vue项目时,弹框是非常常用的组件,并且在同一个项目中,弹框大多类似。所以我们可以抽离封装出一个通用的弹框;因为vue3可向下兼容,所以作者这边会使用vue2的写法,vue3写法大同小异。第一步:新建相关文件一般来说是在src/components/dialog下新建如下两个文件:index.vue:该......
  • 点按钮相机飞行到设备前观察
    效果如下:一、原理二、完整代码:1、html  <divclass="pos">    <divid="A"class="bu">设备A</div>    <divid="B"class="bu"style="margin-left:10px;">设备B</div>   ......
  • avalonia学习之按钮
    Button按钮是一个对指针动作做出反应的控件(并且有一些键盘等效物)。当指针向下时,它以按下状态的形式呈现视觉反馈。指向指针释放序列的指针被解释为点击;并且这种行为是可配置的。在确定用户是否按下按钮时,始终使用Click事件而不是PointerPressed。单击是特定于按钮的高级......