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, 3.skin: '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, 3.skin: '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 layer.open({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 layerLayer. 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 layersOk, temporarily involved so much, the other again use again continue to code ~!