标签：box 弹出框 text 不能 nbsp 方法 targe margin mouse
项目中要做一个弹出框，弹出框里面有一个搜索框，弹出框背后有一个遮罩层，但是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; }
标签：box 弹出框 text 不能 nbsp 方法 targe margin mouse
原文地址：https://www.cnblogs.com/xxflz/p/9466900.html
