js实现点击空白处隐藏
2024-10-08 23:24:27
部分业务要求除了某元素外点击其他对象,对应的元素隐藏,下面是一个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>
最新文章
- 第2月第24天 coretext 行高
- 《zw版&#183;Halcon入门教程与内置demo》
- 13、系统集成项目经理要阅读的书籍 - IT软件人员书籍系列文章
- poj3301Texas Trip(三分)
- iOS PickerView动态加载数据
- HDU-4276 The Ghost Blows Light (树形DP+背包)
- Python学习_Python 3.X版本导入httplib模块报ImportError解决方案
- 性能测试工具:AB
- CentOS6.8使用源码安装Git
- 记那一次C++开发电话面试
- 读书笔记系列01-《收获、不止Oracle》
- Java 集合系列08之 List总结
- GitLab 环境搭建【CentOS7】
- C语言复习---获取最大公约数(辗转相除法和更相减损法)
- MySQL Replication(Master与Slave基本原理及配置)
- VS2015 调试中断点突然失效的解决办法、VS调试时关闭调试让浏览器继续保留页面
- Material Design系列第八篇——Creating Lists and Cards
- 2018.06.29 NOIP模拟 排列(线段树)
- Bootstrap--响应式表格布局
- zuul超时及重试配置1