Layui front-end framework and layui framework

Layui front-end framework and layui framework

A layer effect needs to be popped up in the project. The layui front-end framework is used, and the pop-up layer effect is mainly used (which can be moved)

Html code

Bind the click method to this tag.

1 <a href = 'javascript:; 'data-method = 'offset' data-type = 'auto' class = 'showmean '> display </a>

Click to display this page

1 <div class = "con-no-ma displayNo" id = "con-no-ma"> 2 display page 3 </div>

Js Code

Function showMean () {layui. use ('lay', function () {var $ = layui. jquery, layer = layui. layer; // trigger event, which is equivalent to setting the parameter var active = {offset: function (othis) {var type = othis. data ('type'), text = othis. text (); layer. open ({title: "Data Association", type: 1, offset: type, // For detailed configuration, refer: http://www.layui.com/doc/modules/layer.html#offset Id: 'lay _ demo' + type, // prevent repeated pop-up content: $ ("# con-no-ma"), // new definition on the page, then bind the id to this btn: 'close all', area: ['1000px ', '500px'], btnAlign: 'C', // The button center shade: 0, // do not display the mask // method of btn yes: function () {layer. closeAll () ;}, // method of the close button in the upper right corner cancel: function () {layer. closeAll () ;}}};}; // bind a click event $ ('. showMean '). on ('click', function () {var othis = $ (this), method = othis. data ('method'); active [method]? Active [method]. call (this, othis ):'';});})}

 

Reference: http://www.layui.com/demo/layer.html

: Http://www.layui.com/