Common web front-end components [07] pop-up Layer and weblayer

Common web front-end components [07] pop-up Layer and weblayer

A pop-up box is always required for the web project to allow the user to perform the next step.

Up to another page, up to prompts and confirmation.

After several projects, I still feel that the Layer is easy to use, and the layers you can think of can help you.

Thanks to Layer author xianxin, Layer official website address: http://layer.layui.com/

1. Features of Layer

Layer has a comprehensive solution, dedicated to serving developers of all levels, so that pages can easily have a rich and friendly operation experience.

As far as possible, Layer presents more robust functions with less code, and focuses on performance improvement, ease of use, and practicality ..

Layer is compatible with all mainstream browsers including IE6. A considerable number of interfaces can be used to customize the desired style. Each layer-7 mode has its own characteristics.

The Layer follows the LGPL protocol and will provide free services permanently.

2. Web project introducing Layer

The Layer depends on Jquery's powerful DOM manipulation capabilities. Therefore, before introducing the Layer, remember to introduce Jquery.

<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 display

<div>    <p>layer demo</p>    <button id="msg">layer msg</button>    <button id="content">layer content</button>    <button id="iframe">layer iframe</button>    <button id="loading">layer loading</button>    <button id="tips">layer tips</button></div>

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>        });    });

C. layer iframe

// Layer iframe $ ('# iframe '). on ('click', function () {layer. open ({type: 2, title: 'iframe parent-child 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 (); // setTimeout is used to demonstrate ajax callback setTimeout (function () {layer. close (ii) ;}, 10000 );});

E. layer tips

    //layer tips    $('#tips').on('click', function(){        layer.tips('Hello tips!', '#tips');    });

In web projects, either basic pop-up windows or custom pop-up windows, the Layer can provide excellent support. Here, we only offer some suggestions. For more information, visit the official website.