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>云蚂 ...
随机推荐
- Rust 从入门到精通06-语句和表达式
1.语句和表达式 语句和表达式是 Rust 语言实现逻辑控制的基本单元. 在 Rust 程序里面,语句(Statement)是执行一些操作但不返回的指令,表达式(Expressions)计算并产生一个 ...
- kingbaseES V8R3数据安全案例之---审计记录清除案例
案例说明: 对于KingbaseES V8R3数据库,默认用户无权限删除审计记录,只有对审计记录做了转储以后会自动清理审计记录. 适用版本: KingbaseES V8R3 本案例数据库版本: S ...
- Q准则涡识别方法
Q准则(Q Criterion)在涡识别中计算效率高,效果也不错,是一种常用的涡提取/识别方法. 了解Q准则需要从速度梯度张量入手,而速度梯度张量可以分解成两部分 \[\frac{\partial u ...
- Spring Boot2配置Swagger2生成API接口文档
一.Swagger2介绍 前后端分离开发模式中,api文档是最好的沟通方式. Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务. 及时性 (接 ...
- C#，拷贝文件到另一个文件夹下，替换文件夹中的文件
/// <summary> /// 拷贝文件到另一个文件夹下 /// </summary> /// <param name="sourceName"& ...
- 1 Java内存区域管理
目录 1 关于自动内存管理 2 运行时数据区域 2.1 程序计数器 2.2 虚拟机栈 2.2.1 局部变量表 2.2.2 操作数栈 2.3 本地方法栈 2.4 堆 2.5 方法区 2.5.1 运行时常 ...
- 微信小程序开发总结-怀庄酒业投票活动
使用微信小程序投票活动云开发 怀庄酒业活动 使用云开发.开始准备使用django开发自己的后台,但是发现功能比较简单,使用云开发更省事 项目结构: cloudfunctions目录下是三个云函数 ba ...
- 【Spring】Spring bean中id和name的差异
id和name都是spring 容器中中bean 的唯一标识符. id: 一个bean的唯一标识 , 命名格式必须符合XML ID属性的命名规范 name: 可以用特殊字符,并且一个bean可以用多个 ...
- Call to undefined function think\captcha\imagettftext()
sudo apt install libjpeg62-turbo-dev libfreetype6-dev -y su -c "docker-php-ext-configure gd --e ...
- kibana知识点
1.Kibana 有 Linux.Darwin 和 Windows 版本的安装包.由于 Kibana 基于 Node.js 运行,我们在这些平台上包含了一些必要的 Node.js 二进制文件.Kiba ...