js 点击除div外的关闭div

最新推荐文章于 2023-05-04 10:58:16 发布
最新推荐文章于 2023-05-04 10:58:16 发布
阅读量1.6k 收藏 3
点赞数 1
分类专栏： JS类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunlizhen/article/details/103289554
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css"
          href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .wrapOuter{
        width: 500px;
        height: 300px;
        margin: 0 auto;
        border: 1px solid #ccc;
    }
    #model{
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        background: #ccc;
        background: rgba(0,0,0,0.3);
        left: 0;
        top: 0;
    }
    .model-con{
        width: 400px;
        height:
最低0.47元/天 解锁文章
sunlizhen
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
12-29
本文实例讲述了JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能。分享给大家供大家参考，具体如下： HTML部分： <div id=div>点击除开div的区域可以弹出弹窗</div> <div id=cover></div> <div id=box>点击除开div和弹窗的区域可以关闭弹窗</div> CSS部分： #div{ /*设置z-index属性必须设置position:relative或absolute*/ position:relative; /*设置div位于遮罩的上方*/ z-index:2; width:300px; height:
js点击指定范围之外触发的方法
weixin_45606890的博客
05-13 4518
js点击指定范围之外触发的方法
js实现点击div之外区域,隐藏div
weixin_43239880的博客
05-04 2877
之前在学习的时候，发现别人用了这个contains属性，感觉还是很好用的，记录一下，以免忘记。在监听事件中，判断左侧盒子不包含点击的位置时，则关闭左侧盒子。js 判断是否包含某个DOM元素使用contains。点击左侧弹框之外的区域，会将左侧弹框关闭。
Javascript点击其他任意地方隐藏关闭DIV实例
01-21
代码如下，实现了点击input显示一个div层，当点击除input和div以外的地方的时候，隐藏div的功能。 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>点击其它地方关闭DIV</title> </head> <body> <input type=text value= id=tf/> <div xss=removed id=con> <p>1111</p> <p><span>2
JS点击其它地方关闭DIV
m0_47395232的博客
06-09 1005
JSP代码： <div id="img" class="img" onclick="show(event,'add_img');"> </div> <div id="add_img" onclick="show(event,'add_img');" > <div onclick="hide('add_img')" ></div> </div> JS代码块： <script type="text/javas
vue 点击其他区域关闭自定义div操作
10-15
在Vue.js应用中，有时我们需要实现一种功能，即当用户点击页面上的某个自定义div后，该div显示，而当用户点击除这个div之外的任何其他区域时，该div消失。这种需求通常出现在下拉菜单、弹出框或提示信息等组件中。...
DIV外区域Click后关闭DIV的实现代码
12-03
这样做确保了当用户点击`DIV`外的任何地方时，`DIV`会被关闭，而不会影响其他可能的点击事件。 在`myDiv`的点击事件处理程序中，我们也调用了`event.stopPropagation()`，以防止点击`DIV`本身时触发`document`上的...
JS+CSS实现带关闭按钮DIV弹出窗口的方法
12-11
本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<html> <head> <title>JS+CSS实现带关闭按钮的DIV弹出窗口</title> [removed]...
js实现点击除此之外的地方让其关闭
Feast_aw的博客
02-28 949
$(document).on('click', function(e) { var e = e || window.event; //浏览器兼容性 var element = e.target || e.srcElement; //循环判断至跟节点，防止点击的是div子元素 while (element) { ...
jq实现点击元素之外的地方触发事件，点击弹窗之外，关闭弹窗
qq_34720531的博客
03-23 788
jq 弹窗之外，关闭弹窗
javascript点击除div盒子本身之外的任意地方时，关闭div盒子弹框
美奇软件开发工作室
10-15 2385
html+js代码： <div id="container"> <button id="btn">点击打开弹框</button> <div id="box">我是弹框</div> </div> <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script type="te...
事件冒泡和捕获
weixin_44021199的博客
07-25 248
<!-- 事件流 冒泡 从里向外 捕获 从外向里（ie不支持 ） 既有捕获 又有冒泡 先捕获 后冒泡（先从外到里 再从里向外） --> 测试代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
JavaScript——除指定区域外点击任何地方隐藏DIV
qq_36470686的博客
10-13 4840
效果实现： 点击按钮菜单出现:                                    点击菜单外则收起菜单: 打开菜单效果：给"新建“添加onclick属性，使菜单display="block"显现 关闭菜单效果：使菜单display="none"隐藏   全部代码（代码之后有详解）： document.addEventListener("click",c...
如何点击一个div盒子之外的部分，使这个div盒子关闭
qq_44705916的博客
10-28 2185
【代码】如何点击一个div盒子之外的部分，使这个div盒子关闭。
js实现一个div弹窗附带定时关闭
x1562092008的博客
11-18 1404
因为js自带的alert弹窗太丑且需要用户点击后才能关闭，所以用js+div实现一个弹窗,且附带定时关闭功能 代码如下： style样式： /*背景层*/ #popLayer { display: none; background-color: #B3B3B3; position: absolute;...
点击 div 以外的区域关闭此 div
qq_40113688的博客
07-30 1440
$(function () { $(document).on("click","需要点击的 div ",function(event){ var siblingsDiv = \需要显示隐藏的 div\; showDiv(siblingsDiv);//调用显示DIV方法 $(document).one("click", function () {//对document绑定一个影藏Div方法
js 鼠标点击打开div 再次点击此div 关闭本身
最新发布
06-09
好的，这是一个很常见的需求。你可以通过添加点击事件来实现。 首先，在 HTML 中定义一个需要点击打开/关闭的 div，例如： ...<div id="myDiv"> 这是需要打开/关闭的 ...这样，每次点击 div，它就会切换打开/关闭状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值