How to use layui popup layer

How to use the layui pop-up layer: first introduce any version of jQuery1.8 or above; then introduce laery.js; finally pass "function show(){var a = layer.open({...}) ;}" method can be used to pop up the layer using laery.open.

The operating environment of this tutorial: Windows 7 system, layui2.4&&jquery2.2.1 version, Dell G3 computer.

Recommended: "layUI Tutorial"

The position of layer in the layui system is quite special, and many people even mistakenly think that layui = layer ui, so I emphasize layer again Just as a elastic layer module of layui

1. To obtain laery, you need to go to the official website to download laery.js address - http://layer.layui.com/

2. Introduce laery .js Before this, you must first introduce any version of jQuery 1.8 or above

<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>

3. Use laery.open();

function show(){
  var a = layer.open({
    type: 2,
    area: ['80%','450px'],
    title: '我是标题',
    shadeClose: true,
    content: ['layer_model.html','no']
  });
}

Basic parameters

1. type type

type: 1,  // 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）

2. title title

title:"我是标题",  
//若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;'] 数组第二项可以写任意css样式；
//如果你不想显示标题栏，你可以 title: false

3. content content

3.1. If it is a page layer

layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
 
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
 
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});

Example:

3.2. If it is an iframe layer

layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});

Example:

3.3. If you use layer.open to execute tips Layer

layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});

Example:

4. area width and height

In the default state, the layer is adaptive in both width and height. But when you only want to define the width, you can area: '500px' and the height will still be adaptive. When you need to define both width and height, you can area: ['500px', '300px']

5. btn button

In information box mode, btn is a confirmation button by default. Other layer types are not displayed by default, and loading layers and tips layers are invalid. When you only want to customize one button, you can btn: 'I know', when you want to define two buttons, you can btn: ['yes', 'no']. Of course, you can also define more buttons, such as: btn: ['Button 1', 'Button 2', 'Button 3', ...], the callback for button 1 is yes, and starting from button 2, the callback is btn2 : function(){}, and so on. For example:

layer.open({
  content: 'test',
  btn: ['按钮一', '按钮二', '按钮三'],
  yes: function(index, layero){
    //按钮【按钮一】的回调
  },
  btn2: function(index, layero){
    //按钮【按钮二】的回调
    //return false 开启该代码可禁止点击该按钮关闭
  },
  btn3: function(index, layero){
    //按钮【按钮三】的回调
    //return false 开启该代码可禁止点击该按钮关闭
  },
  cancel: function(){ 
    //右上角关闭回调
    //return false 开启该代码可禁止点击该按钮关闭
  }
});

6, shade mask

is the area outside the spring layer. The default is a black background with 0.3 transparency ('#000'). If you want to define other colors, you can shade: [0.8, '#393D49']; if you don't want to display the mask, you can shade: 0

If your mask exists, you can also set shadeClose to control whether to click on the mask to close. Default: false. If your shade exists, then you can set shadeClose to control clicking on the area outside the elastic layer to close it

The above is the detailed content of How to use layui popup layer. For more information, please follow other related articles on the PHP Chinese website!