How to use the jQuery pop-up layer plug-in hwLayer

We know that jquery provides developers with a plug-in development mechanism, one of which is to extend jquery using $.extend (), which is actually used to add new functions to the jquery namespace. And the other way we used to develop jquery plug-ins is to add new methods to jquery via $.fn.
Basic templates

We use $.FN to do plug-in development, here the basic template can also be said to be the basic format bar, often do the jquery plug-in development friends will first set down the plug-in format, and then the format to fill in the business code.

The following code is the format structure of a basic jquery plug-in.

;(function ($,window,document,undefined) {
$.fn.myplugin = function (options) {
var defaults = {
' Width ': 600,
' Height ': 400
};
var settings = $.extend ({},defaults, options);//An empty object as the first argument
Return This.css ({
' Width ': settings.width+ ' px ',
' Height ': settings.height+ ' px '
});
}
}) (jquery,window,document);
In the above code, we wrap all the plug-in code in the self-invocation function:
;(function ($,window,document,undefined) {
Here's our code.
}) (jquery,window,document);

We add a semicolon at the beginning of the code, which is a habit of avoiding errors with other code conflicts. At the same time, the system variable windows, such as parameters passed to the plug-in inside, it is said to improve plug-in access speed, do not ask me why, are from the experience of the predecessors to learn.
Back to the first code, inside the plugin, Myplugin is the custom plug-in name. We want to provide parameter options to allow users to freely customize, in general, we will provide in the plug-in parameter option of the default value defaults, that is, the user does not pass the parameters call the plug-in using the default parameter values. The Extend method through jquery can receive user-defined parameter options. Finally, we use return to allow the plug-in to support chained calls. This simple code is actually the ability to set width and height.
In fact, we can have a lot of code in the development of plug-ins, in order to better maintain the code, so that the structure of the code clearer, we use object-oriented thinking. Create a new object in your code, define the object's constructor and method, and finally the new object in the plug-in, calling the object method. Well, now we're back to the plugin Hwlayer we're going to introduce, we'll define the plugin Hwlayer template as follows:

;(function ($, window, document, undefined) {
To define a Hwlayer constructor
var hwlayer = function (Ele, opt) {
var self = this;
Self. $element = Ele,
Self.defaults = {
/* Here is the default parameter option * *
},
Self.locked = False,
Self.options = $.extend ({}, self.defaults, opt)
}
Defines the Hwlayer method, where the main business code is written
Hwlayer.prototype = {
Init:function () {

},
Showlayer:function () {

}
}
Using the Hwlayer object in a plug-in
$.fn.hwlayer = function (options) {
var hwlayer = new Hwlayer (this, options);
Return This.each (function () {
Hwlayer.init (); Call its method
});
};
}) (JQuery, window, document);
Hwlayer Plugin
With the above plug-in template format, we can focus on writing the plug-in internal code. The plug-in internal code does not have to specify what format to write, we can be free to play according to business needs. In the Hwlayer plug-in, the Hwlayer object is defined, the default property option is set in the Hwlayer constructor, and then the Hwlayer is defined, and the init (), Showlayer (), Hidelayer () methods, respectively, represent initialization, Displays the pop-up layer and the hidden pop-up layer. In the Init () method, we mainly capture events that click on the triggering pop-up layer and close the pop-up layer. In the Showlayer () method, get the current pop-up layer ID, calculate the gain width and height, and let the pop-up layer be centered, so it's a bit complicated because it is compatible with small screens. In the Hidelayer () method, the pop-up layer is hidden and the callback function that invokes the hidden pop-up layer is triggered. Finally, we call the init () method of the Hwlayer object in the plug-in.
The complete code for the Hwlayer plug-in is as follows, and the plugin file is named: Jquery.hwLayer.js, there are some wrong places, please correct me.

;(function ($, window, document, undefined) {
var hwlayer = function (Ele, opt) {
var self = this;
Self. $element = Ele,
Self.defaults = {
width:600,
Height: ' Auto ',
Taplayer:true,//Turn off the pop-up layer when you click on the semitransparent mask layer
Afterclose:function () {}
},
Self.locked = False,
Self.options = $.extend ({}, self.defaults, opt)
}
Hwlayer.prototype = {
Init:function () {
var self = this,
Ele = self. $element;

Click on the pop-up layer
Ele.on (' click ', Function (e) {
E.preventdefault ();
Self.showlayer ();
});

$ ('. Hwlayer-cancel,.hwlayer-close '). On (' click ', function () {
Self.hidelayer ();
});
},
Show pop-up Layer
Showlayer:function () {
var self = this;
var layerid = self. $element. Data (' Show-layer '); Get Layer ID

if (Layerid = = ' | | layerid = = undefined) {
var msg = ' No popup content set! ';
Console.log (msg);
Alert (msg);
}else{
var layer = $ (' # ' +layerid),
Layerwrap = Layer.find ('. Hw-layer-wrap ');
Layer.fadein ();

Center screen
var layer_w,layer_h;
var w = $ (window). width ();
if (w<768) {
Layer_w = w-30;
}else{
Layer_w = Self.options.width;
}

var h = $ (window). Height ();
if (Layerwrap.outerheight () >h) {
Layer_h = h-40;
Layerwrap.css (' overflow-y ', ' auto ');
}else{
if (self.options.height== ' auto ') {
Layer_h = Layerwrap.outerheight ();
}else{
Layer_h = Self.options.height;
}
}

Layerwrap.css ({
' Width ': layer_w+ ' px ',
' Height ': layer_h+ ' px ',
' Margin-top ':-layer_h/2+ ' px ',
' Margin-left ':-layer_w/2+ ' px '
});
Click or touch the translucent mask layer outside the pop-up layer to close the pop-up layer
Layer.on (' click ', Function (event) {
if (Event.target = = This && Self.options.tapLayer = = True) {
Self.hidelayer ();
}
});
}

},
Hide pop-up Layer
Hidelayer:function () {
var self = this;
$ ('. Hw-overlay '). fadeout ();
Self.options.afterClose.call (self);
}
}


$.fn.hwlayer = function (options) {
var hwlayer = new Hwlayer (this, options);
Return This.each (function () {
if (typeof (Options) = ' string ') {
Switch (options) {
Case ' close ':
Hwlayer.hidelayer ();
Break
}
}else{
Hwlayer.init ();
}
});
};
}) (JQuery, window, document);

Calling the Hwlayer plug-in

Calling the Hwlayer plug-in is very simple. With the previous article Html5+css3+jquery implementation of the pop-up layer, the first preparation of HTML and CSS.
<a href= "#0" class= "btn btn-warning btn-lg" id= "confirm-btn" data-show-layer= "Hw-layer" role= "button" > Click Pop-up Confirmation Box </a>
<a href= "#0" class= "btn btn-info btn-lg" id= "info-btn" data-show-layer= "Hw-layer-info" role= "button" > click on the pop-up information layer </a>

<div class= "Hw-overlay" id= "Hw-layer" >
<div class= "Hw-layer-wrap" >
<div class= "Row" >
<div class= "col-md-3 col-sm-12 Hw-icon" >
<i class= "Glyphicon glyphicon-info-sign" ></i>
</div>
<div class= "Col-md-9 col-sm-12" >
<p> This is a html+css+javascript implementation of the pop-up layer effect, it can be in the PC and mobile-side browser to work. </p>

<br/>
<button class= "btn btn-success hwlayer-ok" > OK </button>
<button class= "btn btn-warning hwlayer-cancel" > Cancel </button>
</div>
</div>
</div>
</div>

<div class= "Hw-overlay" id= "Hw-layer-info" >
<div class= "Hw-layer-wrap" >
<a class= "Close Hwlayer-close" aria-label= "Close" ><span aria-hidden= "true" >x</span></a>
<div class= "Row" id= "Hw-layer-info" >
<p> This is a html+css+javascript implementation of the pop-up layer effect, it is responsive, it can work in all modern browsers (including the PC and mobile side). </p>
</div>
</div>
</div>

Two buttons, corresponding to two pop-up layers. Note Loading CSS and jquery libraries.
Next JS calls:

<script src= "jquery.hwLayer.js" ></script>
<script>
$ (function () {
     $ (' #confirm-btn '). Hwlayer ({
        width:500,
         Taplayer:false,
        afterclose:function () {
            console.log (' close ');
       }
   });
    $ (". Hwlayer-ok"). On (' click ',  function () {
         Console.log (' You've made sure! ');
        $ (' #hw-layer '). Hwlayer (' close ');
   });
    $ (' #info-btn '). Hwlayer ({
        taplayer:true
& nbsp;  });
});
</script>

The

does not explain, the pop-up layer is not just a layer of pop-up display information, such as the previous article, the complex pop-up layer has many interactive applications. Next I'll show you one of the most common pop-up layer interactions: Using jquery+php to implement pop-up login layer interaction. A pop-up login layer, with form verification, asynchronous interaction, pop-up and closed applications, please pay attention.