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不会消失.示例如下: 二.实现方法: 发布需 ...
随机推荐
- 打印vector内容
<span style="font-size:14px;">#include <iostream> #include <vector> #inc ...
- 2.Books
Books示例说明了Qt中SQL类如何被Model/View框架使用,使用数据库中存储的信息,创建丰富的用户界面. 首先介绍使用SQL我们需要了解的类: 1.QSqlDatabase: QSqlDat ...
- Python3 使用requests库读取本地保存的cookie文件实现免登录访问
1. 读取selenium模块保存的本地cookie文件来访问知乎 读取http://www.cnblogs.com/strivepy/p/9233389.html保存的本地cookie来访问知乎的 ...
- 在VS2008和VS2010中禁用Visual Assist X
此方法对于VS2008和VS2010 都适用. 在VS2008或VS2010菜单栏中选择“VassistX”选项卡,找到“Enable/Disable Visual Assist X”选项, 点击即可 ...
- Gson 配置解析
之前项目用到了gson对json和Java类之间互转,现在将gson的配置总结一下. 首先,创建gson对象之间,建立gsonbuilder对象,并配置 // 不导出实体类中没有用@Expose注解的 ...
- 编写高质量代码改善C#程序的157个建议——建议25：谨慎集合属性的可写操作
建议25:谨慎集合属性的可写操作 如果类型的属性中有集合属性,那么应该保证属性对象是由类型本身产生的.如果将属性设置为可写,则会增加抛出异常的几率.一般情况下,如果集合属性没有值,则它返回的Count ...
- 20169219 NMap+Wireshark实验报告
Tcpdump介绍 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中 ...
- MongoDB整理笔记のGUI操作
值得幸运的是,其实MongoDB也有像类似于PL/SQL一样的界面操作工具操作MongoDB. 下面就来介绍几款不同的界面工具,大家各取所需! MongoVUE 主页:http://www.mongo ...
- Oracle Cannot Update TOP N Issue, 请专家解答
大家好 上周写了匿名方法一文,很多读者,很高兴,相信我们已经从大伙的回复中,对.NET又有了更深刻的认识. 好,现在说主题,各类数据库都有相应更新本表top n的方案.现在我一一举例 首先看表结构如下 ...
- Oracle下载及安装
Oracle 下载及安装 一.官方下地址: http://www.oracle.com/technetwork/database/enterprise-edition/downloads/in ...