Layer is a popular web shell layer component in recent years, is a shell layer module in LayUI.

For the project, turn over its brand, record

Since layer can be used independently, it can also be used modularically through Layui. So please choose according to your actual needs.

Usage scenarios Before using the prepared Call way
Used as a standalone component If you just want to use layer alone, you can golayerDownload the component package from the independent version official website. You need to introduce any version of jquery_1.8 or above to your page, and also introduce Layer.js. After introducing layer.js through the script tag, you can use it directly.
Layui is used modularically If you are using Layui, you can download the Layui framework directly from the website. You don’t need to introduce jQuery and layer.js, but you do need to introduce layui.css and layui.js Load the module via _layui.use(‘layer’, callback)_
<script SRC ="layer.js"></script> 3. <script> 4. 5. </script>
Use ('layer', function(){2. var layer = layui.layer; 4. layer.msg('hello'); 5.});

The following is a common example

1. Ask layer

// Ask box 1. layer.confirm(' What do you think of front-end development? '{2. BTN: \ [' important', 'exotic' \] / / button (3)}, function () {4. Layer. MSG (' is really important, {icon: 1}); 5.}, function () {6. Layer. MSG (' can also such, {7. Time: 20000, / / 20 s shut down automatically after 8. BTN: \ [' see ', 'know' \] 9.}); 10.});

2. Loading layer

Var index = layer.load(1, {2.shade: \[0.1,'# FFF '\] //0.1 opacity white background 3.});

3. Prompt layer

Layer. MSG (' In ');

4. Page layer

Open ({2.type: 1, 'layui-layer-rim', // Add border 4.area: \['420px', '240px'\], // width 5.content: 'HTML content' 6.});

5. Tips layer

Layer. tips('Hi, I'm tips', 'adsorb element selector, such as #id');

6. Prompt layer

Prompt ({title: 'enter any password and confirm ', formType: 1}, function(pass, index){2.layer. close(index); Function (text, index){4. Layer. close(index); 5. Layer. MSG (' Demo done! Your password: '+ pass +'<br> You finally write: '+text); 6.}); 7.});

6. Page Layer – custom

Layer. open({2.type: 1, 'layui-layer-demo', // style class name 4. CloseBtn: 0, // do not show the close button 5. True, // turn the mask off 7.

And so there are many, the above listed a few commonly used, other can go to the layer official website according to the need to carry…

Next, list the base parameters of layer

Type – The basic layer type

Type: Number, default: 0

Layer provides five layer types. The values that can be passed in are 0 (information box, default) 1 (page layer) 2 (iframe layer) 3 (load layer) 4 (Tips layer). If you use{type: 1}), type is mandatory (except for information boxes).

Title – title

Type: String/Array/Boolean, default: ‘information’

Title supports three types of values. If you pass in a normal string, such as title :’ I am the title ‘, then only the title text will be changed. If you also need to customize the style of the title area, you can use title: [‘ text ‘, ‘font-size:18px;’], and the second item in the array can be any CSS style; If you don’t want to display the title bar, you can use title: false

The content – content

Type: String/DOM/Array default: ”

The passable value of content is flexible and can be passed not only plain HTML content, but also the DOM, and can vary by type.

Skin – The name of the style class

Type: String, default: ”

Skin allows you to pass in not only the layer’s built-in style class name, but also your own custom class name. This is a good place to start, meaning you can easily customize different styles with Skin. Current layer built-in skin: layui-layer-lan Layui-layer-Molv

Wide area – high

Type: String/Array, default: ‘auto’

By default, the layer is both width and height adaptive, but when you just want to define the width, you can use _area: ‘500px’ and the height is still adaptive. When you want both width and height, you can use _area: [‘500px’, ‘300px’]

Icon – Icon. Private parameters for the message box and load layer

Type: Number, default: -1 (info box) /0 (load layer)

By default, no icon is displayed in the information box. When you want to display an icon, the default skin can pass _0-6_, or 0-2 if it’s a load layer.

BTN button –

Type: String/Array, default: ‘Confirm’

In info box mode, BTN is a confirm button by default, other layer types are not displayed by default, load layer and TIPS layer are invalid. When you want to customize just one button, you can BTN: ‘I know ‘, and 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 with button 2, the callback is btn2: function(){}, and so on.

BtnAlign – Button alignment

Type: String, default: R

You can quickly define where the buttons are arranged. By default, btnAlign is r, right aligned. btnAlign: ‘l’ ; Button left align btnAlign: ‘c’; Center button btnAlign: ‘r’; Right align buttons. This parameter is the default value

CloseBtn – Close button

Type: String/Boolean, default: 1

Layer provides two styles of close buttons that can be displayed by configuring 1 and 2, or closeBtn: 0 if not displayed

Shade – mask

Type: String/Array/Boolean. Default: 0.3

That’s the outside of the shell. Default is a black background with 0.3 transparency (‘#000’). If you want to define something else, shade: [0.8, ‘#393D49’]; If you don’t want to show masks, _shade: 0 can be used

ShadeClose – Whether to click the mask to close

Type: Boolean, default: false

If your shade exists, then you can set shadeClose to control the area outside the layer to be closed by clicking.

Time – Milliseconds required for automatic shutdown

Type: Number, default: 0

It is not automatically turned off by default. When you want to turn it off automatically, you can use time: 5000, which means that it will turn off automatically in 5 seconds. Note that the units are milliseconds (1 second =1000 milliseconds).

Resize – Whether stretching is allowed

Type: Boolean. Default: true

By default, you can drag in the bottom right corner of the shell to stretch the size. To disable this function for a specified shell layer, set this parameter to False. This parameter is invalid for loading and TIPS layers

Move – The element that triggers the drag

Type: String/DOM/Boolean, default: ‘.layui-layer-title’

The default is to trigger drag in the header area. If you want to define it separately, the selector pointing to the element or the DOM will do. As a move: ‘mime – move’. You can also configure move: false to disable drag and drop

Success – The success callback method after the layer pops up

Type: Function, default: null

This callback is used when you need to execute some statements when the layer is created. Success takes two arguments, the current level index of the DOM at the current level.

Yes – Identifies the button callback method

Type: Function, default: null

This callback takes two parameters, the current layer index and the current layer DOM object.

Cancel – callback triggered by the close button in the upper right corner

Type: Function, default: null

This callback takes two parameters, the index parameter and the DOM object of the current layer (Layero), and is automatically closed by default. If you don’t want to close it, return false

End – Callback triggered after layer destruction

Type: Function, default: null

End is executed whenever the layer is destroyed, whether to confirm or cancel, and takes no arguments.

Layer.close (index) – Closes a specific layer

1. layer.close(index); // If you want to close the latest layer, just get layer.index. // It always gets the most recently popped layer, and the value is dynamically incremented within the layer

Layer. closeAll(type) – closeAll layers

If you’re lazy, you _ don’t want to get index_ you just want to close. Then closeAll can really help you. If you do not point to the layer type, it will destroy all layers of the current page. Of course, if you just want to close a certain type of layer, then you can

1. layer.closeAll(); Layer. closeAll('dialog'); 3. Layer. closeAll('page'); 4. layer.closeAll('iframe'); 5. Layer. closeAll('loading'); 6.layer.closeAll ('tips'); // Close all tips layers
Ok, temporarily involved so much, the other again use again continue to code ~!