1、HTML页面

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <style type="text/css">

        #pop {

            border: #000;

            background-color: #CCC;

            position: absolute;

            left: 50px;

            top: 50px;

            width: 200px;

            height: 500px;

            display: none;

        }

        #btn {

            color: #f00;

        }

    </style>

</head>

<body>

    <span id="btn">打开层</span>

    <div>aaaaaaaaaaaa</div>

    <div>aaaaaaaaaaaa</div>

    <div id="pop">

        浮层，点击这个浮层以外的区域，都可以隐藏这个浮层

        <p><a href="javascript:;">最主要的是点这个div里面的链接，div照样不隐藏</a></p>

    </div>

</body>

</html>

2、js 实现

<script type="text/javascript">

    function $(id) { return document.getElementById(id); }

    window.onload = function () {

        document.onclick = function (e) {

            $("pop").style.display = "none";

        }

        $("btn").onclick = function (e) {

            $("pop").style.display = "block";

            e = e || event; stopFunc(e);

        }

        $("pop").onclick = function (e) {

            e = e || event; stopFunc(e);

        }

    }

    function stopFunc(e) {

        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;

    }

</script>

3、JQuery 实现

$("#btn").on("click", function(e){

    $("#menu").show();

    $(document).one("click", function(){

        $("#menu").hide();

    });

    e.stopPropagation();

});

$("#menu").on("click", function(e){

    e.stopPropagation();

});

原文链接：https://blog.csdn.net/yangbingx/article/details/78644486

js/jq 点击按钮显示div，点击页面其他任何地方隐藏div的更多相关文章

  1. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

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

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

  3. js实现点击按钮显示某个区域 然后点击页面中任意其他位置，隐藏该区域

    $(".licat-header-list").on("click",function(e){ $(this).addClass("active&qu ...

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

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

  5. 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  6. JavaScript点击按钮显示 确认对话框

    //JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  7. 点击其它地方隐藏div／事件冒泡／sweet－alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  8. jquery实现除指定区域外点击任何地方隐藏DIV

    <!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...

  9. 点击按钮使用window.open打开页面后，再次点击按钮会再打开一个页面，如何解决？

    点击按钮使用window.open打开页面后,再次点击按钮会再打开一个页面,如何解决? window.open("page1.html","win1"); 这句 ...

  10. js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

随机推荐

  1. 在 C# CLR 中学习 C++ 之了解 extern

    一:背景 在 CLR 源码中有很多的 extern 和 extern "C" 这样的关键词,比如下面这些代码: extern size_t gc_global_mechanisms ...

  2. K8S_三种Port区别总结

    nodePort: 外部流量访问K8S集群中Service入口的一种方式 比如外部用户要访问k8s集群中的一个Web应用,那么我们可以配置对应service的type=NodePort,nodePor ...

  3. Ansible_playbook

    前言 连接https://galaxy.ansible.com下载相应的roles # 列出已安装的galaxy ansible-galaxy list # 安装galaxy ansible-gala ...

  4. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  5. Rust基本数据类型

    基本类型 Rust 每个值都有其确切的数据类型,总的来说可以分为两类:基本类型和复合类型. 基本类型意味着它们往往是一个最小化原子类型,无法解构为其它类型(一般意义上来说),由以下组成: 数值类型: ...

  6. 使用Prometheus和Grafana监控emqx集群

    以 Prometheus为例: emqx_prometheus 支持将数据推送至 Pushgateway 中,然后再由 Promethues Server 拉取进行存储. 注意:emqx_promet ...

  7. C++自学笔记 头文件 （header file）关于 #include 和.h

    头文件 在C++中定义Definition一个类的时候 要用分别的.h和.cpp文件去定义这个类 .h和.cpp成对出现 类的声明declaration和函数原型放在头文件里(.h) 定义这些函数的结 ...

  8. Springboot 之 Filter 实现 Gzip 压缩超大 json 对象

    简介 在项目中,存在传递超大 json 数据的场景.直接传输超大 json 数据的话,有以下两个弊端 占用网络带宽,而有些云产品就是按照带宽来计费的,间接浪费了钱 传输数据大导致网络传输耗时较长 为了 ...

  9. P3919 【模板】可持久化线段树 1（可持久化数组）

    还是用主席树来做(因为提到不同的版本),这时候的主席树不是以权值为下标的,就是普通的线段树,维护范围1~n,i存的是a[ ]中的数. 1 #include <bits/stdc++.h> ...

  10. python中的多线程与多进程

    线程概念: 线程也叫轻量级进程,是操作系统能够进行运算调度的最小单位,它被包涵在进程之中,是进程中的实际运作单位. 线程自己不拥有系统资源,只拥有一点儿在运行中必不可少的资源,但它可与同属一个进程的其 ...