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不会消失.示例如下: 二.实现方法: 发布需 ...
随机推荐
- 如何搭建自己的SPRING INITIALIZR server
这两天在慕课学Spring boot ,用idea通过spring initializr新建项目 即使用代理连不上.无奈. 参考了 GitHub - spring-io/initializr: A w ...
- mongo 修改器 $inc/$set/$unset/$pop/$push/$pull/$addToSet
mongo $inc 可以对集合里面的某些值是数字的增减.看代码 $set 可以进行修改,并且不存在的时候默认添加. 同时还能该变数据的类型. 还可以该变内嵌元素的值 用.调用 $unset 删除 ...
- Marr的视觉计算理论
Marr的视觉计算理论立足于计算机科学,系统地概括了心理物理学.神经生理学.临床神经病理学等方面已取得的所有重要成果,是迄今为止最为系统的视觉理论.Marr 的视觉计算理论虽然在细节甚 ...
- Solidity oraclize query apikey加密
solidity 程序中如果用到oraclize query,api调用需要apikey,则最好加密apikey,否则公开solidity代码时会连同apikey一起公开. 加密方法: https:/ ...
- Hyperledger Fabric Transaction Proposal过程
客户端将交易预提案(Transaction Proposal)通过 gRPC 发送给支持 Endorser 角色的 Peer 进行背书. 这些交易提案可能包括链码的安装.实例化.升级.调用.查询:以及 ...
- C/C++预处理指令常见的预处理指令
C/C++预处理指令常见的预处理指令如下: #空指令,无任何效果 #include包含一个源代码文件 #define定义宏 #undef取消已定义的宏 #if如果给定条件为真,则编译下面代码 #ifd ...
- C# 操作Excel基础篇（读取Excel、写入Excel）
注意事项:Excel的数据表中最多只能储存65535行数据,超出后,需要将数据分割开来进行储存.同时对于Excel中的乱码象限,是由于编码的错误方式导致引起的! 一.读取Excel数据表,获得Data ...
- HDU 3365 New Ground （计算几何）
题意:给定点A[0~n-1]和B[0],B[1],A[0].A[1]映射到B[0].B[1],求出其余点的映射B[2]~B[n-1]. 析:运用复数类,关键是用模板复数类,一直编译不过,我明明能编译过 ...
- (转)ASP.NET基础之HttpHandler学习
原文地址:http://www.cnblogs.com/wujy/archive/2013/08/18/3266009.html 经过前两篇[ASP.NET基础之HttpModule学习]和[ASP. ...
- ubuntu14.04LTS下制作安装启动U盘
ubuntu自带的启动U盘制作工具在我的非UEFI电脑上无法启动,找到一个国产的好用东西:深度deepin-boot-maker. 下载地址(官方百度盘):点击下载 用起来也很简单,只需要选择下载好的 ...