Layui's layer.confirm bullet box usage is very detailed

1. Example of official website

The official website sample code of Layui's bullet box

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

The operation effect is explained as follows

:

"Nani?" is the content of the bullet box.
The element in the "btn" array is the content of the bullet box button.
The title is not filled here, and the default is "information"

Official website address:

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

2. Customize some styles

1. Customize the title

Just change the title to "Operation Prompt", the effect is like this.

The code is as follows:

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

2. Add an icon to the content of the prompt box

Info boxes do not display icons by default. When you want to display an icon, the default skin can pass in 0-6, try to pass "0", the effect is as follows: it

seems to be a warning icon, the code is as follows:

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

The above one is the icon style of 0, because the official website does not clearly state the icon style of 1-6, here is the value of 1-6 to try one by one

Value: 1

Value: 2

Value: 3

Value: 4

Value: 5

Value: 6

3. Define the position of the button

The position of the pop-up button can be defined by the "btnAlign" parameter. The "btnAlign" parameter values ​​are: l (left alignment), c (center alignment), r (right alignment), and the default is r (right alignment). In order to demonstrate clearly, Here is a demonstration with only one button.
"btnAlign" parameter value: l, the effect is as follows:

"btnAlign" parameter value: l, the effect is as follows:

The "btnAlign" parameter value is: l, which is the default value, and the effect is as follows:

code show as below:

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

It is generally the default, and it will be removed later and restored to 3 buttons.

4. Custom close button

We will find an "×" in the upper right corner, which is the close button of the popup box.

This style can also be changed. It can be modified through the "closeBtn" parameter. I have customized it here. The code is as follows:

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

There are three styles: 0, 1, and 2. The default is 1, that is, the above
0 is hidden, and 2 is other styles. The following demonstration

Value: 0

Value: 2

5. Custom mask

Careful friends will find that when the pop-up box pops up, the page will turn black except for the pop-up box. This is the page before the pop-up box appears:

This is the page after the popup appears:

This is set through "shade", which I also customized here, the code is as follows:

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

"shade" is 0.3 by default, the background is black (#000), you can customize the transparency, change it to "1" and the whole page will be completely black except for the pop-up frame.
You can also customize the background color of the mask by setting shade: [0.8, '#DC143C']

Now set the "shade" value to "1", the effect is as follows:

Set the "shade" value to " [0.8, '#DC143C']", the effect is as follows:

6. Customize the mask outside the pop-up box to close the pop-up box

Sometimes we need to click anywhere to close the mask and pop-up frame, provided that there is a pop-up frame and a pop-up frame. This can be achieved through the "shadeClose" parameter.

Click anywhere except the popup

The code to close the popup

is as follows:

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

The default is: false, that is, clicking the pop-up mask does not close the pop-up frame and mask, setting it as: true, that is, clicking the pop-up mask to close the pop-up frame and mask.

7. Define a unique bullet box

You can use the "id" parameter to control the unique pop-up box, just define a unique string value, and only one pop-up box will appear at the same time, which has not been used yet.

code show as below:

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){
    
    
  //按钮【按钮二】的回调
});

Two pop-up frames are defined here, the effect is that the pop-up frame will flash once when you see the pop-up frame.

8. Customize the pop-up animation

You can use the "anim" parameter to set the appearance animation of the bullet box.

"anim" parameter value has 0-6, the default is 0

Official website parameters:

I tried the effect with a value of 2, because the animation time of the bullet box is short, there is no screenshot here, the code is as follows:

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. Close the pop-up animation

You can set whether to close the bullet box through the "isOutAnim" parameter, the default is true, and there will be an over animation when closing the layer. You can also set "isOutAnim" to false to close the popup. code show as below:

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. The pop-up box can be set to the maximum or minimum

You can use the "maxmin" parameter to set the full screen or zoom out of the bullet box. The default is false. If you need to maximize or minimize the bullet box, set the parameter value to true and also explicitly define the "type" parameter of the bullet box. The default value Yes: 0, only valid for "type" parameter values: 1, 2.

"maxmin" parameter value: true, "type" parameter value: 1, the effect is as follows:

code show as below:

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" parameter value: true, "type" parameter value: 2, the effect is as follows:

11. Set the bullet box to be fixed

You can use the "fixed" parameter to set whether the bullet box is fixed at a fixed position on the page when the mouse is scrolling. The default is: true, and if it is set to: false, it will be unfixed.

The "fixed" parameter value is: true, which is the default. Here it is defined explicitly, and the effect is as follows:

code show as below:

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){
    
    
  //按钮【按钮二】的回调
});

The "fixed" parameter value is: false

12. Is stretching allowed?

You can use the "resize" parameter to set whether the bullet box supports stretching. The default value is: true, and if it is set to: false, stretching is not allowed. The effect is as follows:

Here the "resize" parameter is set explicitly, the code is as follows:

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){
    
    
  //按钮【按钮二】的回调
});

If the parameter value is false, the pop-up frame cannot be stretched.

13. Obtain the stretching information of the bullet frame

The stretching information of the bullet box can be obtained through the "resizing" parameter. The parameter value is a function function. Note that it will be triggered after stretching. The effect is as follows: Unstretched
:

After stretching:

code show as below:

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){
    
    
  //按钮【按钮二】的回调
});  

What needs to be done after stretching can be done in the function function.

14. Set the browser scroll bar to display or not

You can set whether the browser scroll bar is displayed or not through the "scrollbar" parameter, the default is: true, set to: false, the scroll bar will not be displayed after the bullet box pops up, the effect is as follows: before the bullet box appears
:

After the popup appears:

code show as below:

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. Define the maximum width

The official website says that the "maxWidth" parameter can set the maximum width

Maybe I set it wrong. I didn’t see the effect when I set it up. The bullet box can still be stretched very wide. The effect is as follows:

code show as below:

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. Set the maximum height

You can set the maximum height of the bullet box through the "maxHeight" parameter. After setting, the bullet box will appear and click the drop-down bar. If the bullet box exceeds the set maximum height, click the drop-down bar and it will disappear. The effect is as follows: no maximum height is set
:

Set the maximum height to: 10, that is, the "maxHeight" parameter value: 10

stretch

The code for stretching beyond the maximum width

is as follows:

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. Customize the stacking order

The stacking order can be defined by the "zIndex" parameter, the default value is: 19891014, that is, at the top of all components, generally used to resolve stacking conflicts with other components.
The "zIndex" parameter is explicitly defined here. The effect is as follows:

Define the "zIndex" parameter value: -1, the effect is as follows:

Define the "zIndex" parameter value: -999, the effect is as follows:

We will find that the bullet box cannot be clicked, because the bullet box is below all components.

code show as below:

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. Customize the drag area

You can set a custom drag area through the "move" parameter. The default value is: '.layui-layer-title', which is to drag the pop-up box from the title area. If you want to define it separately, just point to the element selector or DOM (I didn't try it here). Such as move: '.mine-move'. You also configure the "move" parameter value to: false to disable dragging.

The "move" parameter is: false, and the effect is as follows:

when dragging the bullet box, it is found that the dragging cannot be done. code show as below:

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){
    
    
  //按钮【按钮二】的回调
});  

To restore title dragging, just remove the "move" parameter.

19. Whether to allow dragging outside the window

You can use the "moveOut" parameter to set whether the pop-up box is allowed to be dragged out of the window. The default value is: false, that is, it cannot be dragged out of the window.
The effect of dragging is as follows:

It can be found that dragging to the edge cannot be dragged.

"moveOut" parameter value: true, the effect is as follows:

code show as below:

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. Callback method after dragging

You can use the "moveEnd" parameter to get the trigger event. The default value is: null. If there is no definition, it will not be triggered. After definition, it will be triggered after the pop-up box is moved. The effect is as follows:
the bullet box does not move

drag popup

code show as below:

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 direction and color

The official website says that the "tips" parameter is a private parameter of the tips layer.

But I set the parameters as: 1, 2, 3, 4, [1, '#c00'] but I didn't see any effect of the bullet box. Friends who know, please squeak in the comment area.

22. Whether to allow multiple tips

After I set this parameter, I did not see the pop-up effect. The official website description:

23. The callback function after the bullet box appears

You can get the callback after the bullet box appears through the "success" parameter, the default value is: null, see what happens after the bullet box appears successfully, the effect is as follows: the code is as follows

: