部分业务要求除了某元素外点击其他对象，对应的元素隐藏，下面是一个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实现点击空白处隐藏的更多相关文章

  1. IOS 点击空白处隐藏键盘的几种方法

    IOS 点击空白处隐藏键盘的几种方法     IOS7 点击空白处隐藏键盘的几种方法   IOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能 ...

  2. IOS7 点击空白处隐藏键盘的几种方法

    IOS7 点击空白处隐藏键盘的几种方法   iOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能取消键盘的显示,对于用户体验来说很不友好,我们 ...

  3. react 点击空白处隐藏弹出层

    点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...

  4. IOS Swift UITableViewcontroller实现点击空白处隐藏键盘

    在ios开发中,为了方便,我们经常使用UITableViewcontroller,比如搜索界面为了方便可能更多的使用UITableViewcontroller,那么问题就来了,当我点击搜索框的时候会弹 ...

  5. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

  6. 【Flutter 实战】全局点击空白处隐藏键盘

    老孟导读:为什么要实现点击空白处隐藏键盘?因为这是 iOS 平台的默认行为,Android 平台由于其弹出的键盘右上角默认带有关闭键盘的按钮,所以点击空白处不会隐藏键盘. 对于单个页面来说,通过为 T ...

  7. Andriod中自定义Dialog样式的Activity点击空白处隐藏软件盘（Dialog不消失）

    一.需求触发场景: 项目中需要出发带有EditText的Dialog显示,要求在编辑完EditText时,点击Dilog的空白处隐藏软键盘.但是Dialog不会消失.示例如下: 二.实现方法: 发布需 ...

  8. Vue 实现点击空白处隐藏某节点（三种方式：指令、普通、遮罩）

    在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架, ...

  9. 点击空白处隐藏div

    class="bigPic"的div是被显示或隐藏的div,另外.case > ul > li是class="bigPic"的父级元素 $(&quo ...

随机推荐

  1. tomcat服务器和HTTP协议

    tomcat:一个服务器的服务器软件,发布资源要用的 服务器组成: 1.服务器硬件 2.服务器软件 3.项目(一堆资源的集合) 4.资源tomcat本身是一个java程序,必须依赖jre运行eclip ...

  2. webpack4 入门配置研究

    1. 全局安装 npm install webpack webpack-cli webpack-dev-server -g 1.1)输密文的密码(电脑开机) 1.2)安装成功 2. 输入命令mkdir ...

  3. bootstrap-自带插件（完成的小功能）

    模态框 务必将模态框的HTML代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现和/或功能. <!-- 触发模态框的按钮 --> & ...

  4. 快速失败and安全失败

    快速失败: 举个栗子: public static void main(String[] args) { ArrayList<String> list=new ArrayList<& ...

  5. springcloud -zuul(1-zuul的简单使用)

    1.maven引入包 <dependency> <groupId>org.springframework.cloud</groupId> <artifactI ...

  6. thinkphp 标签库驱动

    任何一个模板引擎的功能都不可能是为你量身定制的,具有一个良好的可扩展机制也是模板引擎的另外一个考量,Smarty采用的是插件方法来实现扩展,Think\Template由于采用了标签库技术,比Smar ...

  7. 01二重退背包+组合数学——cf1111d

    退背包进阶,还是挺难想的 /* dp1[k]表示取到体积k的方案数 dp2[i][j][k]表示左侧必选ij的情况下,取到体积k的方案数 dp2[i][j][k]=dp1[k]-左侧不选ij的方案数 ...

  8. 数学相关比较 牛顿迭代法求开方 很多个n的平方分之一

    牛顿迭代法求开方 牛顿迭代法 作用: 求f(x) = 0 的解 方法:假设任意一点 x0, 求切线与x轴交点坐标x1, 再求切线与x轴交点坐标x2,一直重复,直到f(xn) 与0的差距在一个极小的范围 ...

  9. Hadoop2.X主要模块默认端口及作用

    Hadoop集群的各部分一般都会使用到多个端口,有些是daemon之间进行交互之用,有些是用于RPC访问以及HTTP访问.而随着Hadoop周边组件的增多,完全记不住哪个端口对应哪个应用,特收集记录如 ...

  10. STM32F427VI 电流