<!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空白处隐藏的更多相关文章

  1. JS原生隐藏显示图片,点击切换图片的效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...

  2. jq 点击按钮显示div,点击页面其他任何地方隐藏div

    css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...

  3. vue 点击展开显示更多 点击收起部分隐藏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Winform 基础二 最小化 最大化 关闭 点击任务栏隐藏显示 点击鼠标左键移动窗体

    一 最大化 二 最小化 三 关闭 四 点击任务栏隐藏显示 五 点击鼠标左键移动窗体 六 阴影效果鼠标左键移动窗口 #region UI设置 最大化.最小化.关闭.鼠标移动窗口.点击任务栏切换窗口 th ...

  5. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  6. 3种纯css方法控制元素隐藏显示

    1.通过hover,也是最常用的方式.此方法要求按钮与被控制元素必须有层级关系.(兼容低端浏览器常用) <div class="nav-btn"> <h2> ...

  7. .net工作流引擎ccflow开发平台属性功能的隐藏显示介绍

    关键字: 工作流程管理系统 工作流引擎 asp.net工作流引擎 java工作流引擎. 表单引擎 工作流功能说明  工作流设计 工作流快速开发平台   业务流程管理   bpm工作流系统  java工 ...

  8. [转]javascript 快速隐藏/显示万行表格列的方法

    原文地址:javascript 快速隐藏/显示万行表格列的方法 隐藏表格列,最常见的是如下方式: td.style.display = "none"; 这种方式的效率极低.例如,隐 ...

  9. React 点击按钮显示div与隐藏div，并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

随机推荐

  1. 最近学习的sql查询语句连接查询，标记一下

    select wordbase.name,wb.name,wordconnection.wordid,wordconnection.aid,wordbase.goodsid,goods.hscode, ...

  2. Gouraud Shading

    [Gouraud Shading] Gouraud Shading (高洛德着色/高氏着色) 这种着色的效果要好得多,也是在游戏中使用最广泛的一种着色方式.它可对3D模型各顶点的颜色进行平滑.融合处理 ...

  3. easyui 验证框

    转自:http://blog.csdn.net/pqszq1314/article/details/25896163 例如 校验输入框只能录入0-1000之间 最多有2位小数的数字 表单<inp ...

  4. winfrom保存图片，将文件夹中图片放入listview，与撤回操作

    之前那些操作完成对图片的修改之后,就是要保存图片了. 这里保存用到一个SaveFileDialog控件,可以获取用户选择的保存文件的路径. ) { SaveFileDialog saveImageDi ...

  5. 怎样用jQuery拿到select中被选中的option的值

    1.首先要保证select中每一个option标签都有value属性: 2.jquery的写法 1 $('#sele').val()//这里假设select的id是sele,这样可以获取当前选中的op ...

  6. php static 变量声明

    <?phpfunction test($key){ static $array = array();  /* 静态变量是只存在于函数作用域中的变量,注释:执行后这种变量不会丢失(下次调用这个函数 ...

  7. WebAPI如何返回json

    public HttpResponseMessage PostUser(User user) { JavaScriptSerializer serializer = new JavaScriptSer ...

  8. array_combine()

  9. [Training Video - 4] [Groovy] Constructors in groovy, this keyword

    Bank.log = log Bank b1 = new Bank() b1.name = "BOA" b1.minbalance = 100 b1.city="Lond ...

  10. 如何让springmvc在启动的时候执行特定的业务处理

    如何让springmvc在启动的时候执行特定的业务处理 java 的 web服务器启动时,经常会做一些特定的业务逻辑处理,比如数据库初始化, 初始化系统参数,读取配置文库等. 很多web服务的中间件, ...