$(document).mouseup(function(e){
var _con = $(' 目标区域 '); // 设置目标区域
if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
some code... // 功能代码
}
});

/* Mark 1 的原理:
判断点击事件发生在区域外的条件是:
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素
*/

原文地址:https://segmentfault.com/q/1010000000452465

【 js 片段 】点击空白或者页面其他地方,关闭弹框的更多相关文章

  1. js+css jQuery实现页面后退执行 & 遮罩弹框

    JS部分 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> < ...

  2. jq点击按钮打开和关闭弹出层,点击除了当前按钮以外的地方关闭弹出层

    1.html <a id="more" onclick="moreFun()">更多</a> <ul id="moreL ...

  3. 利用layer实现MVC页面数据互交提示弹框

    需求说明: 一个表单页面,点击提交之后,进入后台进行一系列数据交互,然后将交互信息返回至页面中,并以弹框形式展示 应用场景: 添加.修改.删除数据后,返回数据操作是否成功,以及一些其他信息 前期准备: ...

  4. vue中超简单的方法实现点击一个按钮出现弹框,点击弹框外关闭弹框

    效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" ...

  5. jquery点击弹框外层关闭弹框

    $(document).bind("click",function(e){            if($( e.target ).closest(".game-cont ...

  6. jQuery点击自身以外地方关闭弹出层

    转载自:http://blog.163.com/abkiss@126/blog/static/325941002012111754349590/ 主要功能是点击显示,然后通过点击页面的任意位置都能关闭 ...

  7. jQuery弹出层_点击自身以外地方关闭弹出层

    <html> <style> .hide{display:none;} </style> <script type="text/javascript ...

  8. vue 点击弹窗外框关闭弹框

    https://blog.csdn.net/zjw0742/article/details/77822777 ready() { document.addEventListener('click', ...

  9. HTML页面的三种弹框方式

    1.弹出警告框,带确定按钮:alert 2.弹出,选择框 有确认和取消按钮 confirm 3. 弹出,输入框 : prompt

随机推荐

  1. POST 400 (BAD REQUEST)

    遇到这种错,1,F12打开控制台,2,点击network,找到发送的请求. 3,点击请求,4,看右侧的 Header Preview Response 应该能找到原因. 就拿刚才来说,找了好几个小时原 ...

  2. Slope one—个性化推荐中最简洁的协同过滤算法

    Slope One 是一系列应用于 协同过滤的算法的统称.由 Daniel Lemire和Anna Maclachlan于2005年发表的论文中提出. [1]有争议的是,该算法堪称基于项目评价的non ...

  3. SAX,功能强大的 API

    https://www.ibm.com/developerworks/cn/xml/x-saxapi/ SAX,功能强大的 API 在摘自 XML by Example 的本篇预览中比较了 DOM 和 ...

  4. 【JS深入学习】—— 一句话解释闭包

    闭包的定义: 闭包(closuer)是一个受到保护的变量空间,由内嵌函数构成.就是说闭包内的变量不能被外部函数访问,为什么会这样? 函数的作用域: JS具有函数级的作用域,这表明外部函数不能访问内部函 ...

  5. [SqlServer] Error: 15023

    Use DataBaseName go sp_change_users_login 'update_one', 'UserName', 'UserName' 恢复数据库后,添加用户,报错号15023 ...

  6. 移动端 实现ul横向滚动条

    ul { display: flex; width: 100%; height: 3.333333rem; background: #fff; padding: 0.373333rem 0.32rem ...

  7. docker微服务部署之:六、Rancher管理部署微服务

    docker微服务部署之:五.利用DockerMaven插件自动构建镜像 一. 什么是Rancher Rancher是一个开源的企业级容器管理平台.通过Rancher,企业再也不必自己使用一系列的开源 ...

  8. 我与GitHub的第一次——自制音乐文件修改器

    背景: 随机播放,所有的音乐播放器里面现在几乎都有这个功能吧.但是有没有发现,自己的播放器在选择随机播放的时候,经常会听到重复顺序的歌曲呢?反正我是有这样的感觉,无耐自己平时下的歌曲都是“歌手名—歌曲 ...

  9. NoSQL数据库--简介

    一.What's NoSQL? NoSQL,全称是”Not Only Sql”,指的是非关系型的数据库.这类数据库主要有这些特点:非关系型的.分布式的.开源的.水平可扩展的.原始的目的是为了大规模we ...

  10. jqGrid随窗口大小变化自适应大小-转

    第一种: jqGrid随窗口大小变化自适应宽度 $(function(){ $(window).resize(function(){ $("#listId").setGridWid ...