Click jQuery to close simple instances of the pop-up layer.

Click jQuery to close simple instances of the pop-up layer.

This article mainly introduces the simple example of closing the pop-up layer by clicking jQuery outside of itself. If you need some help, please refer to it.

The main function is to click to display, and then close the display effect by clicking any location on the page. It is mainly used by $ (document). click.

 

There are usually some pop-up layers in the development process. After the pop-up, it is automatically closed when you click somewhere else on the page. The following code is used:

 

HTML code:

 

The Code is as follows:

<Div class = "down"> click </div>

<Div class = "con hide"> show-area </div>

 

CSS code:

. Hide {display: none ;}

 

JS Code

 

The Code is as follows:

$ (Document). ready (function (){

$ ("Div. down"). click (function (e ){

E. stopPropagation ();

$ ("Div. con"). removeClass ("hide ");

});

$ (Document). click (function (){

If (! $ ("Div. con"). hasClass ("hide ")){

$ ("Div. con"). addClass ("hide ");

}

});

});

 

OK. Test it locally and modify the css style!