Layer Pop-up component _javascript tips for common components of Web front-end

Handle several items, or feel Layer use more relaxed, you can think of Layer can help you do.

Thank Layer author Yin Xin, Layer official website address: http://layer.layui.com/

1. Layer Use characteristics

Layer has a full range of solutions, dedicated to the service level of the developers, so that the page easily have a rich and friendly operation experience.

Layer as much as possible to show more robust functionality in less code, focusing on performance improvements, ease of use, and practicality.

Layer is compatible with all major browsers, including IE6. A significant number of interfaces can be customized to the desired style, each of which is characterized by a layer pattern.

Layer follows the LGPL agreement and will provide permanent free service.

2. Web Project Introduction Layer

Layer relies on the powerful DOM manipulation capabilities of jquery, so remember to introduce jquery before introducing Layer.

<script type= "Application/javascript" src= ". /smeui/plugins/jquery/jquery-3.1.0.min.js "></script>
<script type=" Application/javascript "src=" .. /smeui/plugins/layer-2.4/layer.js "></script>

Layer Effect Show

<div>
<p>layer demo</p>
<button id= "msg" >layer msg</button>
id= "Content" >layer content</button>
<button id= "iframe" >layer iframe</button>
< Button id= "Loading" >layer loading</button>
<button id= "Tips" >layer

A.layer msg

Layer msg
$ (' #msg '). On (' click ', Function () {
layer.msg (' Hello layer ');

B.layer Content

Layer content
$ (' #content '). On (' click ', Function () {
Layer.open {
type:1, area
: [' 600px ', ' 360px '],
shadeclose:true,
content: ' \<\div style= ' padding:20px; > Custom Content \<\/div> '
});

C.layer iframe

Layer iframe
$ (' #iframe '). On (' click ', Function () {
Layer.open ({
type:2,
title: ' iframe-parent operation ',
Maxmin:false,
shadeclose:true, area
: [' 600px ', ' 360px '],
content: ' http://www.baidu.com '
});

D.layer loading

Layer lading
$ (' #loading '). On (' click ', Function () {
var II = layer.load ();
This demonstrates the Ajax callback
settimeout (function () {
layer.close (ii);
}, 10000) with settimeout.

E.layer Tips

Layer Tips
$ (' #tips '). On (' click ', Function () {
layer.tips (' Hello tips! ', ' #tips ');
};

In the Web project whether the basic window or the need for personalized pop-up, Layer can provide a good support, here only to make a point, need more information please visit the official website.