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不会消失.示例如下: 二.实现方法: 发布需 ...
随机推荐
- JS中使用正则表达式
- 下载并保存图片Python2.7
#!/usr/bin/env python# -*- encoding: utf-8 -*-import urllib2import os def save_img(img_url,file_name ...
- Leetcode:Substring with Concatenation of All Words分析和实现
题目大意是传入一个字符串s和一个字符串数组words,其中words中的所有字符串均等长.要在s中找所有的索引index,使得以s[index]为起始字符的长为words中字符串总长的s的子串是由wo ...
- day58-activiti 02-历史数据查询
Activity 笔记 第二天 今天内容安排: 1.历史数据查询 办过多少个任务, 这些历史数据有时候我们也需要去查询一下. 本身day02这个项目就没有导jar包,有点类似于maven,在你的项目 ...
- conda create -n AlphaPose2018 python=2.7
conda create -n AlphaPose2018 python=2.7Solving environment: done ==> WARNING: A newer version of ...
- 无返回值的函数如何捕获出错情况（检查errno常量）
在执行这个函数前,先清除errno,函数返回时,检查errno常量. 每次程序调用失败的时候,系统会自动用用错误代码填充errno这个全局变量,这样你只需要读errno这个全局变量就可以获得失败原因了 ...
- c语言实践 打印字母三角形
效果如下: 我是怎么想的: 总共需要打印6行字母,那么就需要一个循环来控制打印第几行,大概代码如下: for(int i=0;i<6;i++) { } 每行都会打印字母,而且循环越往后,需要打印 ...
- 基于.Net平台常用的组件和框架整理
转载自:http://www.cnblogs.com/hgmyz/p/5313983.html 基于转载进行补充 RPC框架: RPC:远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而 ...
- javascript中把一个数组的内容全部赋值给另外一个数组
如:var a = [1,2,3,4];var b= [];b = a;这个不是把值赋值过去而是b作为a的引用,b改变的是a如何b指向的是一个新数组,a把元素值全部赋值过去? 1.普通数组可以使用 ...
- Python基础入门-实现计算器多种姿势
在Python中,虽然定义一个函数只需要def关键字,但是他能实现多种功能和用途,比如今天我们讲解的这几种方式.如何使用函数实现一个计算器的功能呢?当然,实现计算器的方式有很多种,我们举几个比较典型的 ...