Layui的layer.confirm弹框用法，很详细

已于 2023-03-11 20:36:24 修改
阅读量1.3w 收藏 24
点赞数 5
文章标签： layui javascript html
于 2023-03-11 19:11:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kt1776133839/article/details/129463879
版权

目录

一、官网示例

二、自定义一些样式

1、自定义标题

2、给提示框内容加上图标

值为：6​编辑

3、定义按钮的位置

4、自定义关闭按钮

值为：2​编辑

5、自定义遮罩

将“shade”值设置为“ [0.8, ‘#DC143C’]”，效果如下：​编辑

6、自定义点击弹框外遮罩关闭弹框

7、定义唯一弹框

8、自定义弹框出场动画

9、关闭弹框动画

10、设置弹框可以最大或者最小化

“maxmin”参数值为：true，“type”参数值为：2，效果如下：​编辑

11、设置弹框固定

​编辑​编辑

12、是否允许拉伸

13、获取弹框拉伸信息

14、设置浏览器滚动条显示与否

15、定义最大宽度

16、设置最大高度

17、自定义层叠顺序

18、自定义拖拽区域

19、是否允许拖拽到窗口外

20、拖拽完毕后的回调方法

21、tips方向和颜色

22、是否允许多个tips

这个参数我设置之后也没有看到弹框效果，官网描述：​编辑23、弹框出现后的回调函数

一、官网示例

Layui的弹框的官网示例代码

layer.confirm('纳尼？', {
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

运行效果是这样的

解释：

     “纳尼？”就是弹框的内容
    “btn”数组中的元素是弹框按钮的内容
    标题这里没有填，默认就是“信息”

官网地址：

    https://layuion.com/docs/modules/layer.html#btn

二、自定义一些样式

1、自定义标题

就将标题改为“操作提示”，效果是这样的

代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

2、给提示框内容加上图标

信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6，试一下传“0”，效果如下：

看来是个警告图标，代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

上面那个是0的图标样式，因为官网没有明确说明1-6的图标样式，这里就1-6值挨个试一下吧

值为：1

值为：2

值为：3

值为：4

值为：5

值为：6

3、定义按钮的位置

可以通过“btnAlign”参数定义弹框按钮的位置，“btnAlign”参数值有：l（左对齐）、c（居中对齐）、r （右对齐）,默认是r（右对齐），为了演示明显，这里只用一个按钮演示。
“btnAlign”参数值为：l ，效果如下：

“btnAlign”参数值为：l ，效果如下：

“btnAlign”参数值为：l ，也就是默认值，效果如下：

代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  btn: ['按钮一'],
  btnAlign: "r",
}, function(index, layero){
  //按钮【按钮一】的回调
});

4、自定义关闭按钮

我们会发现右上角有一个“×”，这是弹框的关闭按钮。

这个样式也是可以改的，通过“closeBtn”参数进行修改，我这里自定义了，代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

    有0、1、2三种样式，默认是1，也就是上面那个
    0为隐藏，2为其他样式下面演示

值为：0

值为：2

5、自定义遮罩

细心的小伙伴会发现，在弹框弹出的时候，除弹框外页面会变黑一点，这是出现弹框前的页面：

这是出现弹框后的页面：


这是通过“shade”进行设置的，我这里也自定义了，代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: 0.3,
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

    “shade”默认是0.3，背景是黑色（#000），可以自定义透明度，改为“1”整个页面除弹框外就全黑了。
    也可以自定义遮罩的背景颜色，通过 shade: [0.8, ‘#DC143C’] 进行设置。

现在将“shade”值设置为“1”，效果如下：

将“shade”值设置为“ [0.8, ‘#DC143C’]”，效果如下：

6、自定义点击弹框外遮罩关闭弹框

有时候我们需要点击任意位置关闭遮罩和弹框，前提是有弹框和遮罩。可以通过“shadeClose”这个参数来实现。

点击除弹框外的任意位置

弹框关闭

代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.8, '#DC143C'],
  shadeClose: true,
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

    默认为：false，就是点击弹框遮罩不关闭弹框和遮罩，设置为：true，就是点击弹框遮罩关闭弹框和遮罩。

7、定义唯一弹框

可以用“id”这个参数控制唯一弹框，定义唯一的字符串值就行了，同一时间只会出现一个弹框，这个暂时没用过。

代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.3, '#000'],
  shadeClose: true,
  id: "one",
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.3, '#000'],
  shadeClose: true,
  id: "two",
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

这里定义了两个弹框，效果就是看到弹框会闪一下。

8、自定义弹框出场动画

可以用“anim”这个参数设置弹框的出场动画。

    “anim”参数值有0-6，默认是0

官网参数：

试了一下值为2的效果，因为弹框的出场动画时间较短，这里就没有截效果图，代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.3, '#000'],
  shadeClose: true,
  id: "one",
  anim: 2,
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

9、关闭弹框动画

可以通过“isOutAnim”参数设置是否关闭弹框，默认是true，关闭层时会有一个过度动画。也可以将“isOutAnim”设置为false ，即关闭弹框。代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.3, '#000'],
  shadeClose: true,
  id: "one",
  anim: 2,
  isOutAnim: false,
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

10、设置弹框可以最大或者最小化

可以通过“maxmin”参数设置弹框全屏或者缩小，默认是false，如果需要弹框最大或者最小化，将参数值设置为true的同时，还要显示地定义弹框的“type”参数，默认值是：0，只对“type”参数值为：1、2有效。

“maxmin”参数值为：true，“type”参数值为：1，效果如下：

代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.3, '#000'],
  shadeClose: true,
  id: "one",
  anim: 2,
  isOutAnim: false,
  type: 1,
  maxmin: true,
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

“maxmin”参数值为：true，“type”参数值为：2，效果如下：

11、设置弹框固定

可以通过“fixed”参数设置弹框在鼠标滚动时是否固定在页面固定位置，默认为：true，设置为：false则是取消固定。

“fixed”参数值为：true，也就是默认的，这里显示地定义了一下，效果如下：

代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.3, '#000'],
  shadeClose: true,
  id: "one",
  anim: 2,
  isOutAnim: false,
  type: 0,
  maxmin: true,
  fixed: true,
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

“fixed”参数值为：false


12、是否允许拉伸

可以通过“resize”参数设置弹框是否支持拉伸，默认值为：true，设置为：false则不允许拉伸。效果如下：

这里显示地设置了一下“resize”参数，代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.3, '#000'],
  shadeClose: true,
  id: "one",
  anim: 2,
  isOutAnim: false,
  type: 0,
  maxmin: true,
  fixed: true,
  resize: true,
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

参数值为：false，则不能拉伸弹框。

13、获取弹框拉伸信息

可以通过“resizing”参数获取弹框的拉伸信息，参数值是一个function函数，注意要拉伸后才会触发，效果如下：
未拉伸：

拉伸之后：

代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.3, '#000'],
  shadeClose: true,
  id: "one",
  anim: 2,
  isOutAnim: false,
  type: 0,
  maxmin: true,
  fixed: true,
  resize: true,
  resizing: function(val) {
    console.log("val", val);
  },
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

拉伸之后需要做什么在function函数中操作就好了。

14、设置浏览器滚动条显示与否

可以通过“scrollbar”参数设置浏览器滚动条显示与否，默认为：true，设置为：false ，弹框弹出之后滚动条就不显示了，效果如下：
未出现弹框之前：

出现弹框之后：

代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.3, '#000'],
  shadeClose: true,
  id: "one",
  anim: 2,
  isOutAnim: false,
  type: 0,
  maxmin: true,
  fixed: true,
  resize: true,
  resizing: function(val) {
    console.log("val", val);
  },
  scrollbar: false,  
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

15、定义最大宽度

官网上说“maxWidth”参数可以设置最大宽度

可能我设置得不对，设置完可以的时候没有看到效果，弹框还是可以拉得很宽，效果如下：

代码如下：

layer.confirm('纳尼？', {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.3, '#000'],
  shadeClose: true,
  id: "one",
  anim: 2,
  isOutAnim: false,
  type: 0,
  maxmin: true,
  fixed: true,
  resize: true,
  resizing: function(val) {
    console.log("val", val);
  },
  scrollbar: true,
  area: 'auto',
  maxWidth: 10,
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

16、设置最大高度

可以通过“maxHeight”参数设置弹框的最大高度，设置了之后弹框会出现点击下拉条，拉伸弹框超过设置最大高度，点击下拉条就会消失，效果如下：
没有设置最大高度：

设置最大高度为：10，也就是“maxHeight”参数值为：10

拉伸

拉伸超过最大宽度

代码如下：

layer.confirm("默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁止拖拽", {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.3, '#000'],
  shadeClose: true,
  id: "one",
  anim: 2,
  isOutAnim: false,
  type: 0,
  maxmin: true,
  fixed: true,
  resize: true,
  resizing: function(val) {
    console.log("val", val);
  },
  scrollbar: true,
  area: 'auto',
  maxWidth: 10,
  maxHeight: 100,
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

17、自定义层叠顺序

可以通过“zIndex”参数定义层叠顺序，默认值为：19891014 ，也就是在所有组件的最前面，一般用于解决和其它组件的层叠冲突。
这里显示地定义了一下“zIndex”参数。效果如下：

定义“zIndex”参数值为：-1，效果如下：

定义“zIndex”参数值为：-999，效果如下：

我们会发现不能点击弹框了，这是因为弹框在所有组件的下面。

代码如下：

layer.confirm("纳尼？", {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.3, '#000'],
  shadeClose: true,
  id: "one",
  anim: 2,
  isOutAnim: false,
  type: 0,
  maxmin: true,
  fixed: true,
  resize: true,
  resizing: function(val) {
    console.log("val", val);
  },
  scrollbar: true,
  area: 'auto',
  maxWidth: 10,
  zIndex: -999,
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

18、自定义拖拽区域

可以通过“move”参数设置自定义拖拽区域，默认值为：‘.layui-layer-title’，就是从标题区域拖拽弹框，如果你想单独定义，指向元素的选择器或者DOM即可（这里我没有试）。如move: ‘.mine-move’。你还配置设定“move”参数值为: false 来禁止拖拽。

“move”参数为：false，效果如下：

拖动弹框的时候发现拖动不了。代码如下：

layer.confirm("纳尼？", {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.3, '#000'],
  shadeClose: true,
  id: "one",
  anim: 2,
  isOutAnim: false,
  type: 0,
  maxmin: true,
  fixed: true,
  resize: true,
  resizing: function(val) {
    console.log("val", val);
  },
  scrollbar: true,
  area: 'auto',
  maxWidth: 10,
  zIndex: 19891014,
  move: false,
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

如果要恢复标题拖拽，将“move”参数移除就行了。

19、是否允许拖拽到窗口外

可以通过“moveOut”参数设置弹框是否允许拖拽到窗口外，默认值为：false，即不能拖拽到窗口外。
拖拽效果如下：

可以发现拖拽到边缘就不能拖动了。

“moveOut”参数值为：true，效果如下：

代码如下：

layer.confirm("纳尼？", {
  title: "操作提示",
  icon: 0,
  closeBtn: 2,
  shade: [0.3, '#000'],
  shadeClose: true,
  id: "one",
  anim: 2,
  isOutAnim: false,
  type: 0,
  maxmin: true,
  fixed: true,
  resize: true,
  resizing: function(val) {
    console.log("val", val);
  },
  scrollbar: true,
  area: 'auto',
  maxWidth: 10,
  zIndex: 19891014,
  moveOut: true,
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

20、拖拽完毕后的回调方法

可以用“moveEnd”参数获取触发事件，默认值为：null，没有定义是不会触发的，定义后在移动弹框后触发。效果如下：
弹框没有移动

拖拽弹框

代码如下：

layer.confirm("纳尼？", {
     title: "操作提示",
     icon: 0,
     closeBtn: 2,
     shade: [0.3, '#000'],
     shadeClose: true,
     id: "one",
     anim: 2,
     isOutAnim: false,
     type: 0,
     maxmin: true,
     fixed: true,
     resize: true,
     resizing: function(val) {
         // console.log("val", val);
     },
     scrollbar: true,
     area: 'auto',
     maxWidth: 100,
     zIndex: 19891014,
     moveOut: false,
     moveEnd: function(val) {
         console.log("moveEnd", val);
     },
     btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
     ,btn3: function(index, layero){
         //按钮【按钮三】的回调
     }
 }, function(index, layero){
     //按钮【按钮一】的回调
 }, function(index){
     //按钮【按钮二】的回调
 });

21、tips方向和颜色

官网上说“tips”参数是tips层的私有参数。

但我设置参数为：1、2、3、4、[1, ‘#c00’] 都没有看到弹框有什么效果。知道的小伙伴麻烦在评论区吱一声。

22、是否允许多个tips

这个参数我设置之后也没有看到弹框效果，官网描述：

23、弹框出现后的回调函数

可以通过“success”参数获取弹框出现之后的回调，默认值为：null，看看弹框成功出现之后有什么，效果如下：

 

Famiglistimott
关注
  • 5
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
ioBroker.statistics:ioBroker 的一些统计数据
07-24
ioBroker.statistics 该适配器使用 Sentry 库自动向开发人员报告异常和代码错误。 有关更多详细信息以及如何禁用错误报告的信息，请参阅！ 从 js-controller 3.0 开始使用哨兵报告。 描述 这个适配器将使统计的配置更容易。 The adapter only reacts on state changes (state.ack=true), not on commands! 从以下设置中选择： 计数脉冲或开/关变化（仅适用于二进制值和上升沿） 从计数值计算成本（仅适用于二进制值） 状态为真/开多长时间以及假/关多长时间（仅适用于二进制值） 记录的模拟值之间的增量（仅适用于模拟值） 每日最大值、最小值和平均值（不适用于增量计算） 全年最小/最大 在 5 分钟内计数以及每天的最大值、最小值和平均值（不适用于增量计算） 分组值的总和 适配器订
layer.confirm点击第一个按钮关闭弹出框的方法
01-19
layer.confirm弹出框，当你点击第一个按钮的时候，这个弹出层不会关闭，也是给一些小伙伴带来了一些困扰， 下面分享两个解决方案： ①可以将第一个按钮的回调函数传一个index，然后使用layer.close(“index”)就可以点击第一个按钮的时候关闭弹出框了，代码如下： ②第二种方法就非常的粗暴了，你可以直接在这个回调函数中写： layer.closeAll('dialog'); 也能实现点击第一个按钮的时候关闭弹出框 以上这篇layer.confirm点击第一个按钮关闭弹出框的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
解决layer.confirm选择完之后消息框不消失的问题
12-13
如下所示： layer.confirm('主题库里已存在相同的表', function(){ 。。。。。。。。。。//处理结果 }); 当用户选择完确定之后，消息框不会消失，并且代码会继续执行，会出现代码后需要显示的信息已经出现但是消息框仍然显示在最前面（跳转页面不算） 这是要用layer.closeAll(‘dialog’);这个代码关闭信息框 layer.confirm('主题库里已存在相同的表', function(){ layer.closeAll('dialog'); 。。。。。。。。。。//处理结果 }); 这样消息框在选择完确定后就被关闭了 以上这篇解决layer.co
layui之layer各种弹出层
Cloud-Future的博客
12-05 1万+
一、简单信息提示层 示例： //提示层 layer.msg('玩命提示中'); 默认关闭时间是3秒，效果如下（背景是官网的广告，实际效果是黑色半透明）： 自定义样式以及时间，代码如下： layer.msg('操作成功!', {icon: 6, time: 2000}); icon样式是6，关闭时间为2秒。效果如下： 二、询问框 示例： //询问框 layer.confirm( '您是如何看待前端开发？', //弹出框内容，支持html //下面是配置选项
layer.confirm()如何使用？
写写代码
05-02 4652
layer.confirm()是Layer中的一个方法，用于弹出一个确认框，让用户进行确认操作。常用于删除或其他重要操作的确认提示。其中，确认框的回调函数参数为index，可以通过调用layer.close(index)方法来手动关闭确认框。在例子中，第二个参数的回调函数表示用户点击了确认按钮，第三个参数的回调函数表示用户点击了取消按钮。调用 layer.confirm() 方法，传入需要显示的提示内容和配置项即可。首先需要引用Layer的js和css文件，与layer.msg()使用方法一样。
layer 实现弹窗提交信息
橙子wj的博客
12-11 2万+
layer是非常好用的弹窗插件，具体参见官方文档 点击这里进入。官方有很多示例，使用方法也非常简单，引入官方下载的css和js就可以了。但是有时候，弹窗提醒并不能满足我们的所有要求。例如，在奖品界面，希望点击“编辑奖品”的时候，能弹出对话框让我们来填写信息，如下图所示：如何用简洁美观的 layer 实现这一功能呢？官方并没有给我们提供示例，那就自己动手写吧。下面把代码贴出来。给“添加奖品”按钮加上
alert及confirm弹出框样式，换不错
11-10
alert及confirm弹出框样式，换不错
layui框架学习（24：弹出层模块_消息框&提示框）
gc_2299的博客
05-25 7353
学习并记录了弹出层模块layer中最简单的提示框和信息框的用法及常用属性设置
layui框架——弹出层layer
热门推荐
meixu568的专栏
07-26 9万+
两种调用方法： 1、引用独立的layer.js文件 引入好layer.js后，直接用即可 <script src="layer.js"></script> <script> layer.msg('hello'); </script> 2、调用layui中的layer模块 layui.use('layer', function(){ ...
layer.confirm
weixin_40408702的博客
12-26 917
layer.confirm(msg, {btn: ['确认', '取消'],title:"立案审查保存成功"},function(index, layero){ $("#laxxTab").tabs('select',"财产保全信息"); // $("#laxxTab").tabs('select',1); lay...
layer.confirm取消按钮绑定事件的方法
10-18
今天小编就为大家分享一篇layer.confirm取消按钮绑定事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element中的$confirm的使用
10-15
主要介绍了element中的$confirm的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js模拟Confirm、alert弹框,可以修改文字颜色。
07-19
可以直接调用，操作方便，调用代码如下： jConfirm('Can you confirm this，<span am red.?', 'Confirmation Dialog', function(r) { });
解决layer.confirm快速点击会重复触发事件的问题
10-16
今天小编就为大家分享一篇解决layer.confirm快速点击会重复触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui中禁用div标签等操作
最新发布
小二丶的博客
04-29 184
layui div 框架 div内的子元素 按钮 等 功能禁用
vue2---修饰符
weixin_45503872的博客
04-24 1059
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 451
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 357
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
layui layer.confirm
05-24
layui 是一个基于 jQuery 的前端 UI 框架，而 layer.confirm 是 layui 中的一个弹出层组件。它可以用来显示一个确认对话框，用户需要点击确认或取消按钮才能关闭对话框，并且可以根据用户的选择执行相应的操作。例如： ``` layer.confirm('你确定要删除吗？', function(index){ // 点击确认按钮执行的代码 layer.close(index); // 关闭对话框 }, function(){ // 点击取消按钮执行的代码 }); ``` 这段代码会在页面中弹出一个确认对话框，询问用户是否要删除，如果用户点击确认按钮，就会执行第一个回调函数中的代码，如果点击取消按钮，则会执行第二个回调函数中的代码。在第一个回调函数中，我们可以做一些删除操作，然后调用 layer.close(index) 来关闭对话框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Famiglistimott

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值