Read the Layer pop-up pattern

Foreword: Learn the Layer pop-up box, the previous project is used in the bootstrap model box, then use the Layer pop-up box, behind the article, I will share some code of the project (I wrote it yourself).

Layer still acts as a representative of Layui, and her audience is not accidental, but the persistence of more than five years, continuous improvement and maintenance, continuous construction and enhance community services, making it spontaneously spread, even As a strongest source of Layui today. At present, Layer has become a Web structure of the most people in China, GitHub Nature Stars3000+, the official website accumulated download amount of 30W +, about 200,000 web platforms are using Layer. Specifically, move the Layer official website,

This blog will reference some of the official website, mainly writing some difficulties in Layer. For example, how to open a new web page with Layer, Content can be used for an URL, but in your project, this URL is why ?? HTML’s direct path? Relative path ?? Nothing !! Hower How to get the father Elements of the interface, such as the new button, submit it after the Layer box, how to turn off the current Layer box, amount, close the Layer box is simple, but how to launch a AJAX request according to the FORM table in the parent interface, Refresh information. That is, how the Layer sub-interface calls the parent interface.

If you don’t want to use Layui, just want to use Layer, you can go to the Layer independent component official website to download component packages. You need to introduce any version of jQuery1.8 or more in your page and introduce Layer.js.

 // pops up a page layer $ ('# test2'). ON ('Click', Function () { ({Type: 1, Area: ['600px ',' 360px '], shadeClose: true, // Close Click mask content:' \  custom content \  '});});        title - title  
type: String / Array / Boolean, default: ‘information’

title supports three types of values, if you pass an ordinary string, such as title: ‘I’m heading,’ then just change the title text; if you need to customize the header area style, then you can title: [ ‘text’, ‘font-size : 18px; ‘], the second array can write any css style; if you do not want to display the title bar, you can title: false

content – content

type : String / DOM / Array, default: ”

content can be passed values ​​are flexible, not only can pass an ordinary html content, you can also specify the DOM, but also with the different type of different. For example:

/ * If the layer is a page * / ({type:! 1, content: ‘any incoming text or html’ // this content is a common String}); ({type: 1, content: $ ( ‘# id’) // this is a content the DOM, Note: this element is preferably located in a body to the outermost layer, or it may be influenced by other elements opposite}); // Ajax obtaining $ .post ( ‘url’, {}, function (str) { ({type: 1, content: str // Note that, if the object is str ,SoNeed character splicing. });}); /! * If it is iframe layer * / layer.Open ({type: 2, content: ‘’ // Here Content is a URL, if you don’t want to make the iframe roll Bar, you can also Content: [‘’, ‘no’]}); /! If you use Layer.Open to execute TIPS layer * / layer.Open ({Type: 4, Content: [‘Content’, ‘#id’] // array second item, i.e., the adsorption element selector or DOM});

  BTN - button  
Type: String / Array, Default: ‘Confirm’
When the information box mode is a confirmation button, the other layer type is not displayed by default, the loading layer and the TIPS layer are invalid. . When you want to customize a button, you can btn: ‘I know’, 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’, …], button 1 callback is YES, starting from the button 2, then callback BTN2 : function () {}, so on. Such as:

// EG1 LAYER.CONFIRM (‘Ni.’, {btn: [‘button one “,’ button 2 ‘,’ button three ‘] / / unlimited buttons, btn3: function (index, layero) {// the button three button [callback]}}, function (index, layero) {// button [push button] of a callback}, function (index) { // button [button two] callback})// ({Content: ‘Test’, btn: [‘button one “,’ button 2 ‘,’ button three ‘], YES: Function (index, layero) {// button [button one] Pool}, btn2: function (index, layero) {// button [button 2] Toned // Return FALSE Opening This code can be disabled Click this button to close}, btn3: function (index, layero) {// button [button Trimming // Return False Open the code to turn click on the button to turn off}, carative: function () {// Top Top Top Turn up the callback // Return False Open the code can prohibit clicking the button to close}});

Success – Success Templication Method (

Type: Function, Default: Null
  When you need Execute some statements at the layer creation, you can pass the callback. Success will carry two parameters, namely the current layer DOM current layer index. Such as:  
Layer.Open ({Content: ‘Test Tune “, Success: Function (Layero, INDEX) {Console.log (Layero, Index);}})

YES – Determine button callback method

Type: function, default: null

This callback belt Two parameters, respectively, the current layer index, the current layer DOM object, respectively. Such as: ({content: ‘test callback’, yes: function (index, layero) {// do something layer.close (index); // If yes callback is set, the need for hand-off}});
cancel – button in the upper right corner to close the trigger callback

type: Function, default: null

the callback carry two parameters, namely: the current layer index parameter (index), DOM objects in the current layer (layero), the default will be triggered automatically shut down. If you do not want to turn off, return false, like this;

cancel: function (index, layero) {if (confirm ( ‘want to close it’)) {// click OK to confirm only when the box, the layer will not close layer.close (index)} return false;}
end – the destruction trigger layer callback

type: Function, default: null

either confirm or cancel, as long as the layer is destroyed, end execution will not bring any parameters.

layer.ready (callback) – initialize ready
Since our layer built lightweight loader so you do not need to introduce a separate css file and so on. But always it requires loading process. When you are going to open a page in performing elastic layer, the elastic layer is preferably you put ready method, such as:

// open a page on the implementation of elastic layer laYER.Ready (Function () {layer.msg (‘very happy to see you’);}); Layer.close (Index) – Turn off a specific layer (more important)

About it seems to have the necessary introduction, the only thing that makes you doubt, maybe it is this INDEX. In fact it is very easy to get.
  // When you want to close a layer of the current page VAR index = layer.Open (); var index = layer.alert (); var index = layer .load (); var index = (); // As you can see, each of the laying modes will return an indexlayer.close (INDEX); // You only need to get it Index, gently give Layer.Close // If you want to close the latest pop-up layer, get layer.closex directly to Layer.Closex; // It is always the latest pop-up one Layer, the value is used by the internal dynamic incremental calculation of Layer. When you turn it off at the iframe page, VAR index = parent.layer.getFrameIndex (Window.Name); // get the current IFRAME layer index parent.Layer.close ( Index); // Remittable Layer.GetIldFrame (Selector, Index) - Get the dom  

when you try to get the DOM element of the IFRAME page in the current page You can use this method. Selector is the selector of the IFrame page ({TYPE: 2, Content: 'Test / iframe.html', Success: Function (Layero, Index) {var body = layer.getchildframe ('body', index); var iframewin = window [layero.find ('iframe') [0] ['Name']]; // Get the window object of the IFRAME page, the method of executing the iframe page: ifraMewin.method (); console.log (Body.html ()) // Get the body page of the iFrame page Body .find ('INPUT'). VAL ('Hi, I am')}}}) from the parent page;  

Layer.GetFrameIndex (Windowname) – Obtain index of a particular IFRAME layer
 This method is generally used to use it when the IFRAME page is turned off.   
// Assume that this is the iframe page VAR index = parent.Layer.GetFrameIndex (Window.Name); // get the index of the current IFRAME layer Parent.Layer.close (INDEX); // Rehaption Close

Method for encapsulating the Layer pop-up box and the closing of the Layer pop-up box (code is given on Monday, now there is no code in the hand)
The above is the detailed Layer pop-up pattern of Xiaobian gives you, I hope that everyone can help, if you have any questions, please leave a message, Xiaobian will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment