Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > JS Tutorial > body text

A simple example of jQuery clicking somewhere other than itself to close the popup layer_jquery

WBOY

Release： 2016-05-16 17:07:31

Original

963 people have browsed it

The main function is to click to display, and then click anywhere on the page to turn off the display effect, mainly the function of $(document).click

There are often some pop-up layers during the development process. After pop-up, they should be automatically closed when clicking elsewhere on the page. The following is the implementation code:

HTML code:

Copy code The code is as follows:

click

show-area

CSS code ：
.hide{display:none;}

JS code

Copy 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 Well, modify the css style yourself!

Related labels：

jquery Pop-up layer

source：php.cn

Previous article：Example introduction to how to obtain the document node object_javascript skills Next article：Summary of several methods for refreshing the current page in JS_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn