自制弹出框所踩的坑

最新推荐文章于 2024-07-11 08:14:58 发布

weixin_34081595

最新推荐文章于 2024-07-11 08:14:58 发布

阅读量102

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xxflz/p/9466900.html

本文介绍了一种在弹出框内实现搜索框交互的方法，确保点击搜索框时弹窗保持打开状态，而点击背景遮罩层时关闭弹窗。通过特定的HTML结构和JavaScript事件监听实现了这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中要做一个弹出框，弹出框里面有一个搜索框，弹出框背后有一个遮罩层，但是layer插件又不能适用中国业务场景，

要求是：点击搜索框本身弹出框不关闭，点击遮罩层阴影部分关闭弹出框

开始想的很简单，只要点击搜索框的父级就可以实现，实际结果是：点击搜索框的时候弹出框全部关闭。

通过思考发现以下方法可以完美解决次问题

                
html
layer 为整个弹出框
search-box 为搜索框
　　　　　　　　　　<div class="layer">
                        <div class="search-box">
                            <img src="img/search.png"/>
                            <input type="text" placeholder="搜索标题、内容"/>
                            <div>搜一下</div>
                        </div>
                </div>

JS   

 $(document).mousedown(function(e){
        if(!$(e.target).is($('.search-box'))&&$(e.target).parent('.search-box').length===0){
            $(".layer").hide();
            $('.search-img').show()
        }
    })

$(e.target) 为鼠标所处位置

$(e.target).parent('.search-box').length===0) 鼠标所处位置不是搜索框本身

CSS样式也很重要，要把搜索框放在最外层

.layer{
    position: absolute;
    background:rgba(16,15,15,0.5);
    height:924px;
    width: 97.5%;
    padding:30px -30px 30px 30px;
    top:75px;
    display: none;
}

.search-box{
    line-height: 52px;
    height: 52px;
    width:75%;
    position:absolute;
    background: #f5f5f5;
    margin-top:20px;
    margin-left: 30px;
}