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 ...
随机推荐
- 调用API接口,查询手机号码归属地(1)
使用https://www.juhe.cn/提供的接口,查询归属地 在官网注册key即可使用. 代码如下 #!/usr/bin/python # -*- coding: utf-8 -*- impor ...
- 借用数组对象的prototype给数组扩充降维方法
原理:只要是一个对象,他都有一个prototype原型对象,保存共有的属性和方法. <!DOCTYPE html> <html lang="en"> < ...
- H5新增input表单、表单属性
新增表单 email,Email类型 url , Url类型 date,日期类型 time,时间类型 month,月类型 week,周类型 number,数字类型 tel,电话类型 search,搜索 ...
- struts2验证器
1. Struts2 的验证(note6,struts2-8) 1). 验证分为两种: > 声明式验证* >> 对哪个 Action 或 Model 的那个字段进行验证 >&g ...
- Spring Boot 自定义注解,AOP 切面统一打印出入参请求日志
其实,小哈在之前就出过一篇关于如何使用 AOP 切面统一打印请求日志的文章,那为什么还要再出一篇呢?没东西写了? 哈哈,当然不是!原因是当时的实现方案还是存在缺陷的,原因如下: 不够灵活,由于是以所有 ...
- 深度探索C++对象模型之第四章:函数语义学
C++有三种类型的成员函数:1.static/nonstatic/virtual 一.成员的各种调用方式 C with Classes 只支持非静态成员函数(Nonstatic Member Func ...
- pandas-pd.read_csv
read_csv()接受以下常见参数: 参数 中文名 参数类型 默认参数 参数功能 说明 filepath_or_buffer various :文件路径.URL.或者 是read()函数返回的对 ...
- CSP-S2019旅游记
CSP-S2019 你问我为什么写旅游记? 因为好像除了旅游我今年啥都没干 Day0 校内模拟一直被吊锤,考前几场几乎要爆零 这提莫就不是什么好兆头 在家二刷水淹东京完回学校,带了一大堆家当上车 去广 ...
- flyway 管理数据库版本
Flyway 和 Liquibase 都是 Java 项目中常用的 DB migration 工具, 从使用简便性看,Flyway 比 Liquibase 更简单, 从 github 的 star 数 ...
- Yii2配置
最外层:配置文件,params Yii2导航 <?php NavBar::begin([ 'brandLabel' => '大海', 'brandUrl' => Yii::$app- ...