【Javascript学习笔记】【DOM实战— —jQ实现点击任意位置关闭某处的效果（常用于模态框后面的遮罩层）】

最新推荐文章于 2024-03-20 17:33:06 发布

欣欣__KuanG97

最新推荐文章于 2024-03-20 17:33:06 发布

阅读量1.3k

点赞数

分类专栏：前端（js、html、css、less）

本文链接：https://blog.csdn.net/m0_37136491/article/details/81332454

版权

这篇博客介绍了如何使用JavaScript实现点击页面任意位置关闭模态框背后的遮罩层效果，详细讲解了实现原理并提供了实战代码示例。通过设置事件监听器和阻止事件冒泡，确保点击目标区域外的任何地方都能关闭遮罩层，同时避免了点击目标区域自身导致的关闭问题。

摘要由CSDN通过智能技术生成

【Javascript学习笔记】

点击任意位置关闭某处

而且点击对应处并不会hide掉自己

原理

//点击文档任意处都触发该事件
$(document).mousedown(function(e){
   
    //只有当某对象存在时才会有的点击任意处出现的事件效果
    if($(e.target).parents(".search").length==0){
        $("xxx").slideToggle(300);//显示隐藏
    }
})

下列网页实战中我取出部分，因此最后看起来样式可能不相同。
其中思想是

//点击文档任意处都触发该事件
$(document).mousedown(function(e){
   
    if(想要显示的对象如果是在显示状态时才有以下的触发效果){
        //只有当某对象存在时才会有的点击任意处出现的事件效果
        if($(e.target).parents(".search").length==0){
            $("xxx").slideToggle(300);//显示隐藏
        }
    }
})

效果

这里写图片描述

代码

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>backspacing</title>
    <style type="text/css">
        html{
            background: #666;
        }
        .topList{
            float: right;
            margin-right: 36px;
            list-style: none;
        }
        .topList li{
            float: left;
            height: 35px;
            line-height: 35px;

最低0.47元/天解锁文章

欣欣__KuanG97

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Javascript学习笔记】【DOM实战— —jQ实现点击任意位置关闭某处的效果（常用于模态框后面的遮罩层）】

【Javascript学习笔记】目录目录点击任意位置关闭某处的效果（类模态框后面的遮罩层）效果代码快捷链接点击任意位置关闭某处的效果（类模态框后面的遮罩层）效果代码html部分css部分js部分快捷链接全部Javascript学习笔记的目录 Click Here&amp;amp;gt;&amp;amp;gt; git...
复制链接

扫一扫

专栏目录