js/jq 点击按钮显示div，点击页面其他任何地方隐藏div
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的更多相关文章
- js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div
点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...
- jq 点击按钮显示div,点击页面其他任何地方隐藏div
css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...
- js实现点击按钮显示某个区域 然后点击页面中任意其他位置，隐藏该区域
$(".licat-header-list").on("click",function(e){ $(this).addClass("active&qu ...
- React 点击按钮显示div与隐藏div，并给div传children
最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...
- 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- JavaScript点击按钮显示 确认对话框
//JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- 点击其它地方隐藏div／事件冒泡／sweet－alert阻止冒泡
点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...
- jquery实现除指定区域外点击任何地方隐藏DIV
<!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...
- 点击按钮使用window.open打开页面后，再次点击按钮会再打开一个页面，如何解决？
点击按钮使用window.open打开页面后,再次点击按钮会再打开一个页面,如何解决? window.open("page1.html","win1"); 这句 ...
- js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div
这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...
随机推荐
- 搭建docker镜像仓库(一)：使用registry搭建本地镜像仓库
目录 一.系统环境 二.前言 三.使用registry搭建私有镜像仓库 3.1 环境介绍 3.2 k8smaster节点配置镜像仓库 3.3 k8sworker1节点配置从私有仓库上传和拉取镜像 3. ...
- 使用IntelliJ IDEA新建一个spring boot项目
好家伙, 使用IntelliJ IDEA新建一个spring boot项目 目的很简单,就是网页上出现一个"hello world" 别的暂时不管 首先关于工具IntelliJ I ...
- KingbaseESV8R6不同隔离级下xmin的区别
背景 sys_stat_activity视图中用两个字段表示: backend_xid表示事务开始需要申请的事务id backend_xmin表示一个事务快照,表示当前数据库中最小的正在运行的事务号, ...
- KingbaseES V8R6 维护管理案例之---Kstudio在CentOS 7启动故障
案例说明: 在CentOS 7上安装KingbaseES V8R6C006数据库后,启动Kstudio图形界面启动失败,gtk动态库加载失败,安装gtk相关动态库后,问题解决. 适用版本: Kin ...
- linux中cd后自动 ls的设置
根据不同的shell设置不太一样.常见的有bash csh两种.可以用echo $SHELL来查询当前是哪一种. bash设置是在用户的home下打开.bashrc在里面加上如下: cd() { bu ...
- C#,使用FindWindow和FindWindowEx查找窗体和控件
函数: // Find Window // 查找窗体 // @para1: 窗体的类名 例如对话框类是"#32770" // @para2: 窗体的标题 例如打开记事本 标题是&q ...
- 基于koa模块和socket.io模块搭建的node服务器实现通过jwt 验证来渲染列表、私聊、群聊功能
1. 具体代码在需要的下载 https://gitee.com/zyqwasd/socket 效果: 2. package.json文件 1. 下载基本的模块 修改了start 脚本 nodemo ...
- WSL 2简介
Windows Subsystem for Linux(WSL)适用于 Linux 的 Windows 子系统是微软在Windows 10上提供的一项供用户快速运行Linux命令和工具的功能.相比前一 ...
- Elasticsearch：用户安全设置
Elastic Stack的组件是不安全的,因为它没有内置的固有安全性. 这意味着任何人都可以访问它. 在生产环境中运行Elastic Stack时,这会带来安全风险. 为了防止生产中未经授权的访问, ...
- 常用的清理 Kubernetes 集群资源命令
1. Kubernetes 基础对象清理 清理 Evicted 状态的 Pod kubectl get pods --all-namespaces -o wide | grep Evicted | a ...