点击隐藏显示和点击body空白处隐藏
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0; padding:0;}
.btn{background:#BF8B8B; width: 150px; height: 30px; line-height: 30px; margin: 0 auto; text-align: center; border-radius: 10px; display: block; text-decoration: none; color: #fff; font-size: 16px;}
.pop{ width: 200px; height: 150px; margin: 20px auto; background: red; display: none; }
</style>
</head> <body>
<a href="javascript:;" class="btn">点击</a>
<div class="pop">弹窗显示</div>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".btn").click(function(event) {
if ($(".pop").is(":hidden")) {
$(".pop").show();
} else {
$(".pop").hide();
}
event.stopPropagation();
});
$('body').click(function() {
if (!$(".pop").is(":hidden")) {
$(".pop").hide();
}
});
})
</script>
</body> </html>
效果图：
第二：
var publicPopWrap = $("#publicPopWrap");//弹窗外层
var popShowBtn = $("#popShowBtn");//获取点击按钮
popShowBtn.on("click",function(){
publicPopWrap.show();
})
//除了弹窗内容框内，点击任意位置弹窗隐藏
publicPopWrap.on("click",function(e){
if ($(e.target).closest("#publicPop").length > 0) {
$(this).show();
} else {
$(this).hide();
}
})
//点击空白处隐藏弹出层
$(document).click(function(event){
let _con = $("#zhwnlPopCon") // 设置目标区域
if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
bindPopupZhwnl.hide();
}
});
/* Mark 1 的原理：
判断点击事件发生在区域外的条件是：
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素
*/ 点击隐藏显示和点击body空白处隐藏的更多相关文章
- JS原生隐藏显示图片,点击切换图片的效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
- jq 点击按钮显示div,点击页面其他任何地方隐藏div
css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...
- vue 点击展开显示更多 点击收起部分隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Winform 基础二 最小化 最大化 关闭 点击任务栏隐藏显示 点击鼠标左键移动窗体
一 最大化 二 最小化 三 关闭 四 点击任务栏隐藏显示 五 点击鼠标左键移动窗体 六 阴影效果鼠标左键移动窗口 #region UI设置 最大化.最小化.关闭.鼠标移动窗口.点击任务栏切换窗口 th ...
- 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏
<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...
- 3种纯css方法控制元素隐藏显示
1.通过hover,也是最常用的方式.此方法要求按钮与被控制元素必须有层级关系.(兼容低端浏览器常用) <div class="nav-btn"> <h2> ...
- .net工作流引擎ccflow开发平台属性功能的隐藏显示介绍
关键字: 工作流程管理系统 工作流引擎 asp.net工作流引擎 java工作流引擎. 表单引擎 工作流功能说明 工作流设计 工作流快速开发平台 业务流程管理 bpm工作流系统 java工 ...
- [转]javascript 快速隐藏/显示万行表格列的方法
原文地址:javascript 快速隐藏/显示万行表格列的方法 隐藏表格列,最常见的是如下方式: td.style.display = "none"; 这种方式的效率极低.例如,隐 ...
- React 点击按钮显示div与隐藏div，并给div传children
最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...
随机推荐
- C#中的goto
int i = 9;if (i % 2 == 0) goto Found;else goto NoFound; NoFound: Console.WriteLine(i.ToSt ...
- Lambert模型
[Lambert模型] 漫反射光的强度近似地服从于Lambert定律,即漫反射光的光强仅与入射光的方向和反射点处表面法向夹角的余弦成正比. 由此可以构造出Lambert漫反射模型:Idiffuse = ...
- git本地代码库回滚(webstorm下)
git本地代码库回滚(webstorm下) 1. 场景 添加了一个文件[file-for-test.js]到git的控制下(并没有push到远程分支上) 进行了三次修改,并分别进行了三次commit( ...
- 【codevs3160】 LCS 【后缀自动机】
题意 给出两个字符串,求它们的最长公共子串. 分析 后缀自动机的基础应用. 比如两个字符串s1和s2,我们把s1建为SAM,然后根据s2跑,找出s2每个前缀的最长公共后缀. 我们可以理解为,当向尾部增 ...
- [hdu1823]Luck and Love(二维线段树)
解题关键:二维线段树模板题(单点修改.查询max) #include<cstdio> #include<cstring> #include<algorithm> # ...
- 解剖Nginx·模块开发篇（2）ngx_http_hello_world_module 模块基本结构定义
elloWorld 是一个典型的 location 模块.什么是 location 模块?在 Nginx 中,根据作用域,有 main 模块.server 模块.location 模块. 1 模块定义 ...
- 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- H5 继承
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...
- RTX Server SDK跨服务器
反向单点登录RTX,即通过腾讯通登录到其他的系统,登录腾讯通后其他的系统不用输入用户名和密码即可登录.可能有二种情况.腾讯通和其他系统在同一台服务器上或在不同的服务器上.要调用腾讯通的登录验证接口的系 ...
- Openssl ecparam命令
一.简介 椭圆曲线密钥参数生成及操作 二.语法 openssl ecparam [-inform DER|PEM] [-outform DER|PEM] [-in filename] [-out fi ...