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>云蚂 ...
随机推荐
- 前端利器躬行记（8）——VSCode插件研发
VSCode提供了丰富的 API,可以借助编辑器扩展许多定制功能. 本次研发了一款名为 Search Method 的插件,在此记录整个研发过程. 一.准备工作 1)安装环境 首先是全局安装 yo 和 ...
- Ubuntu locale设置
/bin/bash: warning: setlocale: LC_ALL: cannot change locale (en_US.UTF-8) 解决方法: 1 sudo locale-gen &q ...
- 引擎之旅 前传：C++代码规范
自己以前写代码时,一个项目一个风格.单人开发的工作使得我并没有注意到代码规范性和可读性的问题.每当项目结束后,看到自己杂乱无章的代码,完全没有二次开发和重构的欲望. 写代码就应该像写诗一样优雅. by ...
- 华南理工大学 Python第5章课后小测-2
1.(单选)下面语句的输出结果是: ls = [] def func(a, b): ls.append(b) return a*b s = func("hi", 2) print( ...
- http服务（postman调用方法及反参）
#region 监听url #region 监听url路径请求 static HttpListener httpobj; private void listeningUrl() { //提供一个简单的 ...
- [Python]-tqdm模块-给for循环加上进度条
import tqdm 使用tqdm模块,可以在漫长的for循环加上一个进度条,显示当前进度百分比. 将tqdm写在迭代器之外即可:tqdm(iterator) for i in tqdm(range ...
- CAP 6.2 版本发布通告
前言 今天,我们很高兴宣布 CAP 发布 6.2 版本正式版,在这个版本中我们主要做了一些功能优化,以及针对目前已经发现的几个 BUG 进行了修复了. 那么,接下来我们具体看一下吧. 总览 可能有些人 ...
- flutter系列之:Material中的3D组件Card
目录 简介 Card详解 Card的使用 总结 简介 除了通用的组件之外,flutter还提供了两种风格的特殊组件,其中在Material风格中,有一个Card组件,可以很方便的绘制出卡片风格的界面, ...
- 官方文档----ProxySQL 1.4.2 现在支持原生集群！！！
官方文档地址:https://proxysql.com/blog/proxysql-cluster/ 前言 ProxySQL 是一个去中心化的代理,建议靠近应用部署.这种方法甚至可以很好地扩展到数百个 ...
- filebeat直接给es传输日志，自定义索引名
ElasticStack从2019年1月29日的6.6.0版本的开始,引入了索引生命周期管理的功能,新版本的Filebeat则默认的配置开启了ILM,导致索引的命名规则被ILM策略控制. 加上这个配置 ...