js实现点击空白处隐藏
部分业务要求除了某元素外点击其他对象，对应的元素隐藏，下面是一个demo效果，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title> <style type="text/css">
.fun-set-bg{width:%;height:%;overflow-x:hidden;overflow-y:auto;}
.maskTask{width: %;position: fixed;opacity: .;left: ;top: ;height: %;z-index: ;background-color: #;display: none;}
.maskCone{width: %;position: fixed;background-color: #fff;z-index: ;height: %;left: %;top: %;border-radius: 5px;padding: 10px 20px;display: none;}
#btns{padding: 2px 8px;border-radius: 3px;} </style>
</head>
<body>
<div class="fun-set-bg">
demo样式-
<button class="starts">出现</button>
</div>
<div class="maskTask"></div>
<div class="maskCone">
<p>阿部察察错错</p>
<button id="btns">取消</button>
</div>
<script type="text/javascript" src="../../js/jquery_v3.3.1.js"></script> <script>
$(function(){
$(".starts").click(function(event){
var e=window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
$(".maskCone,.maskTask").show();
});
$(".maskCone").click(function(event){
var e=window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
});
$(document).click(function(event) {
$(".maskCone,.maskTask").hide();
});
$('#btns').click(function(event) {
$(".maskCone,.maskTask").hide();
});
})
</script>
</body>
</html>
js实现点击空白处隐藏的更多相关文章
- IOS 点击空白处隐藏键盘的几种方法
IOS 点击空白处隐藏键盘的几种方法 IOS7 点击空白处隐藏键盘的几种方法 IOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能 ...
- IOS7 点击空白处隐藏键盘的几种方法
IOS7 点击空白处隐藏键盘的几种方法 iOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能取消键盘的显示,对于用户体验来说很不友好,我们 ...
- react 点击空白处隐藏弹出层
点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...
- IOS Swift UITableViewcontroller实现点击空白处隐藏键盘
在ios开发中,为了方便,我们经常使用UITableViewcontroller,比如搜索界面为了方便可能更多的使用UITableViewcontroller,那么问题就来了,当我点击搜索框的时候会弹 ...
- jquery实现点击按钮弹出层和点击空白处隐藏层
昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){ $('.autoBtn' ...
- 【Flutter 实战】全局点击空白处隐藏键盘
老孟导读:为什么要实现点击空白处隐藏键盘?因为这是 iOS 平台的默认行为,Android 平台由于其弹出的键盘右上角默认带有关闭键盘的按钮,所以点击空白处不会隐藏键盘. 对于单个页面来说,通过为 T ...
- Andriod中自定义Dialog样式的Activity点击空白处隐藏软件盘（Dialog不消失）
一.需求触发场景: 项目中需要出发带有EditText的Dialog显示,要求在编辑完EditText时,点击Dilog的空白处隐藏软键盘.但是Dialog不会消失.示例如下: 二.实现方法: 发布需 ...
- Vue 实现点击空白处隐藏某节点（三种方式：指令、普通、遮罩）
在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架, ...
- 点击空白处隐藏div
class="bigPic"的div是被显示或隐藏的div,另外.case > ul > li是class="bigPic"的父级元素 $(&quo ...
随机推荐
- mysql动态列--统计报表信息对比
SET @sql = NULL; SELECT GROUP_CONCAT(DISTINCT CONCAT( 'MAX(IF(tmp.summary = ''', tp.summary, ''', tm ...
- delphi文件后缀全解
delphi文件后缀全解 1. 项目文件(.dpr):Delphi项目文件,用于保存窗体.单元等的信息,以及程序运行的初始化代码等,这种文件实际上包含了Pascal源代码. 2. 单元文件(.pas) ...
- VScode Python no module的解决方法
在lauch.json中,修改 "env": {}为 "env": {"PYTHONPATH":"${workspaceRoot} ...
- hdu 6435 /// 状压
题目大意: 给定 n m k 为 n种主武器 m种副武器 武器有k种属性 接下来n行 先给定当前主武器的综合分s1 再给定k种属性的值 接下来m行 先给定当前副武器的综合分s2 再给定k种属性的值 要 ...
- mysql全套
1. 什么是数据库 存储数据的仓库 2. 什么数据: 大家所知道的都是数据.比如:你同学的名字,年龄,性别等等 3. 数据库概念 1.数据库服务器 2.数据库管理系统 重点 3.库 4.表 5.记录 ...
- D3.js绘制 颜色:RGB、HSL和插值 (V3版本)
颜色和插值 计算机中的颜色,常用的标准有RGB和HSL. RGB:色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加来得到额各式各样的颜色.三个通道的值得范围都 ...
- Operator '?:' has lower precedence than '*'; '*' will be evaluated first
1.项目中用宏的时候,遇到如下警告 Operator '?:' has lower precedence than '*'; '*' will be evaluated first 2.错误原因 *操 ...
- 随笔记录 shell脚本相关内容 2019-8-26
字符串截取: 假设变量为var=http://www.hao.com/123.htm1. # 号截取,删除左边字符,保留右边字符.echo ${var#*//}其中 var 是变量名,# 号是运算符, ...
- 关于windows一些常用的快捷键使用说明
犹由于经常使用linux和windows,所以有时候就会觉得windows一点需要点击好多下才能够完成的设定非常的麻烦,这里总结一些常用到的快捷键功能,会随着本小白的工作经验而添加. 1.ctrl+a ...
- mfc中的_T
mfc 中的字符串表示常用_T,意为text,定义为宏定义,可以方便的定义所有字符串为UNICODE(16位,长字符)或者ANSI(8位,短字符). 如果对于所有的字符串定义了_T并且定义了预处理标志 ...