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>云蚂 ...
随机推荐
- HMS Core基于地理位置请求广告，流量变现快人一步
对于想买车的用户来说,如果走在路上刷社交软件时突然在App里收到一条广告:"前方500米商圈里的某品牌汽车正在做优惠,力度大福利多."不管买不买,八成都会去看看,原因有三:距离近. ...
- idea中设置注释颜色
1. 打开idea,右上角File-->Settings 2.找到Language Defaults-->Comments里面Block comment和Line comment 3.Bl ...
- atcoder beginner contest 251(D-E)
Tasks - Panasonic Programming Contest 2022(AtCoder Beginner Contest 251)\ D - At Most 3 (Contestant ...
- 第七十五篇：Vue兄弟组件传值
好家伙, 兄弟组件的传值用到Eventbus组件, 1.EventBus的使用步骤 ① 创建 eventBus.js 模块,并向外共享一个Vue的实例对象 ②在数据发送方, 调用bus.$emit(' ...
- 从零教你使用MindStudio进行Pytorch离线推理全流程
摘要:MindStudio的是一套基于华为自研昇腾AI处理器开发的AI全栈开发工具平台,该IDE上功能很多,涵盖面广,可以进行包括网络模型训练.移植.应用开发.推理运行及自定义算子开发等多种任务. 本 ...
- luogu [ZJOI2007] 矩阵游戏
[ZJOI2007] 矩阵游戏 题目描述 小 Q 是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个 \(n \times n\) 黑白方阵进行(如同国际象棋 ...
- C#非托管泄漏中HEAP_ENTRY的Size对不上是怎么回事？
一:背景 1. 讲故事 前段时间有位朋友在分析他的非托管泄漏时,发现NT堆的_HEAP_ENTRY 的 Size 和 !heap 命令中的 Size 对不上,来咨询是怎么回事? 比如下面这段输出: 0 ...
- 使用 Skywalking Agent，这里使用sidecar 模式挂载 agent
文章转载自:https://bbs.huaweicloud.com/blogs/315037 方法汇总 Java 中使用 agent ,提供了以下三种方式供你选择 使用官方提供的基础镜像 将 agen ...
- Kubernetes 中部署 MySQL 集群
文章转载自:https://www.cnblogs.com/ludongguoa/p/15319861.html 一般情况下 Kubernetes 可以通过 ReplicaSet 以一个 Pod 模板 ...
- PAT (Basic Level) Practice 1024 科学计数法 分数 20
科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [+-][1-9].[0-9]+E[+-][0-9]+,即数字的整数部分只有 1 位,小数部分至少有 1 位,该数字及其指 ...