angularjs指令弹框点击空白处隐藏及常规方法
效果图展示：
第一种方法：angularjs自定义指令：
指令：
app.directive('onBlankHide', function () {
return {
restrict: 'A',
scope: {
pop: '='
},
link: function (scope, element, attr) {
element.on('click', function (e) {
$('#' + scope.pop).fadeIn();
$(document).click(function () {
$('#' + scope.pop).hide();
});
//阻止底层冒泡
e.stopPropagation();
});
$('#' + scope.pop).click(function (e) {
//阻止底层冒泡
e.stopPropagation();
})
}
}
});
调用方法：
<input id="btn" type="button" value="显示DIV" on-blank-hide pop="'myDiv'" />
<div id="myDiv">
This is a div;
</div>
说明：pop是向指令传递的值，表示关联弹框的id名，不要忘‘’
完整栗子（代码可直接copy）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<title>Document</title>
<style type="text/css">
body {
background-color: #999999;
} #myDiv {
background-color: #FFFFFF;
width: 250px;
height: 250px;
display: none;
}
</style>
</head> <body ng-app="myApp">
<input id="btn" type="button" value="显示DIV" on-blank-hide pop="'myDiv'" />
<div id="myDiv">
This is a div;
</div>
</body>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.directive('onBlankHide', function () {
return {
restrict: 'A',
scope: {
pop: '='
},
link: function (scope, element, attr) {
element.on('click', function (e) {
$('#' + scope.pop).fadeIn();
$(document).click(function () {
$('#' + scope.pop).hide();
});
//阻止底层冒泡
e.stopPropagation();
}); $('#' + scope.pop).click(function (e) {
//阻止底层冒泡
e.stopPropagation();
})
}
}
}); </script> </html>
常规方法(代码可直接copy)：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>Document</title>
<style type="text/css">
body {
background-color: #999999;
} #myDiv {
background-color: #FFFFFF;
width: 250px;
height: 250px;
display: none;
}
</style>
</head> <body>
<input id="btn" type="button" value="显示DIV" />
<div id="myDiv">
This is a div;
</div>
</body>
<script type="text/javascript">
$(function () {
$("#btn").click(function (event) {
$('#myDiv').fadeIn();
$(document).one("click",
function () { //对document绑定一个影藏Div方法
$('#myDiv').hide();
}); event.stopPropagation(); //阻止事件向上冒泡
});
$('#myDiv').click(function (event) { event.stopPropagation(); //阻止事件向上冒泡
});
}); </script> </html>
深夜还在码代码，但是我总觉得是值得的，因为我又懂了一个知识点。
angularjs指令弹框点击空白处隐藏及常规方法的更多相关文章
- react 点击空白处隐藏弹出层
点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...
- jquery实现点击按钮弹出层和点击空白处隐藏层
昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){ $('.autoBtn' ...
- IOS Swift UITableViewcontroller实现点击空白处隐藏键盘
在ios开发中,为了方便,我们经常使用UITableViewcontroller,比如搜索界面为了方便可能更多的使用UITableViewcontroller,那么问题就来了,当我点击搜索框的时候会弹 ...
- 【Flutter 实战】全局点击空白处隐藏键盘
老孟导读:为什么要实现点击空白处隐藏键盘?因为这是 iOS 平台的默认行为,Android 平台由于其弹出的键盘右上角默认带有关闭键盘的按钮,所以点击空白处不会隐藏键盘. 对于单个页面来说,通过为 T ...
- IOS 点击空白处隐藏键盘的几种方法
IOS 点击空白处隐藏键盘的几种方法 IOS7 点击空白处隐藏键盘的几种方法 IOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能 ...
- IOS7 点击空白处隐藏键盘的几种方法
IOS7 点击空白处隐藏键盘的几种方法 iOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能取消键盘的显示,对于用户体验来说很不友好,我们 ...
- vue中点击空白处隐藏弹框（用指令优雅地实现）
在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div c ...
- Vue 实现点击空白处隐藏某节点（三种方式：指令、普通、遮罩）
在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架, ...
- Andriod中自定义Dialog样式的Activity点击空白处隐藏软件盘（Dialog不消失）
一.需求触发场景: 项目中需要出发带有EditText的Dialog显示,要求在编辑完EditText时,点击Dilog的空白处隐藏软键盘.但是Dialog不会消失.示例如下: 二.实现方法: 发布需 ...
随机推荐
- JAVA 微信开发
公司最近要搭建一个java的微信系统,感觉自己没有记录的很多所以从今天开始每天开始更新一遍java的微信文章记录. 如有兴趣的可以加入群463676190,一起交流交流
- Zookeeper Api(java)入门与应用
如何使用 Zookeeper 作为一个分布式的服务框架,主要用来解决分布式集群中应用系统的一致性问题,它能提供基于类似于文件系统的目录节点树方式的数据存储,但是 Zookeeper 并不是用来专门存储 ...
- 粗粒度（Coarse-grained）vs细粒度（fine-grained）
在读的一篇文献中关于RDF的描述: As we know, RDF data is a set of triples with the form (subject, property, object) ...
- __sync_fetch_and_add系列
__sync_fetch_and_add系列一共有十二个函数,有加/减/与/或/异或/等函数的原子性操作函数,__sync_fetch_and_add,顾名思义,先fetch,然后自加,返回的是自加以 ...
- 717. 1-bit and 2-bit Characters最后一位数是否为0
［抄题］: We have two special characters. The first character can be represented by one bit 0. The secon ...
- Java c3p0 连接 MySQL
<?xml version="1.0" encoding="UTF-8"?> <!-- 需要导入c3p0驱动jar包和mysql驱动jar包 ...
- 1-如何自己在eclipse上配置Andriod环境
转载:http://blog.csdn.net/dr_neo/article/details/49870587 最新鲜最详细的Android SDK下载安装及配置教程 2015年11月16日 19:2 ...
- _GNU_SOURCE宏
打开_GNU_SOURCE这个宏可以打开一些功能,比如为了在Linux系统上编译使用带有检测文件type的宏(S_ISxxxx): S_ISREG() //传入stat结构的st_mode,下同.是否 ...
- su 和sudo su 的区别
su "user" 执行该命令,需要输入password,它是"user"中定义的用户的password,即,要变换成的用户的password.(如果已经用ro ...
- 特殊的HttpApplication事件处理
在global.asax中,针对HttpApplication的事件处理,可以通过定义特殊命名的方法来实现.首先,这些方法必须符合System.EventHandler,因为所有的HttpApplic ...