Bootstrap+Angularjs自制弹框
指令
directive('bsPopup', function ($parse) {
return {
require: 'ngModel',
restrict: 'A',
link: function (scope, elem, attrs, ctrl) {
scope.$watch(function () {
return $parse(ctrl.$modelValue)(scope);
}, function (newValue) {
if (newValue ==) {
$(elem).modal('hide');
return;
}
if (newValue == ) {
$(elem).modal('show');
return;
}
});
}
}
});
<button class="btn btn-xs btn-warning" data-target="#myModal" data-toggle="modal" ng-click="sss()">弹框</button>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" bs-popup="" ng-model="test"
id="myModal" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header alert-info">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 id="myModalLabel" class="modal-title">弹框</h4>
</div>
<div class="modal-body">
<button class="btn btn-info" ng-click="hhh()">测试</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Bootstrap+Angularjs自制弹框的更多相关文章
- 自己写的基于bootstrap风格的弹框插件
自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...
- angularjs指令弹框点击空白处隐藏及常规方法
效果图展示: 第一种方法:angularjs自定义指令: 指令: app.directive('onBlankHide', function () { return { restrict: 'A', ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- bootstrap弹框
http://v3.bootcss.com/javascript/#modals 参考bootstrap官网 模态框做php后端 前端一直不行,但是很多时候 用到ajax都要用到弹框,一直在代码里面找 ...
- Bootstrap学习笔记(9)--模态框(登录/注册弹框)
说明: 1. 上来一个ul先把登录和注册两个链接扔进去,ul的类nav,navbar-nav是导航条,navbar-right让他固定在右侧.每个li的里面,data-toggle="mod ...
- angularJs $mdDialog和$uibModal弹框关闭传值
$mdDialog以一个点击button按钮出现弹框为例: $scope.btn=function($event,row){ var dScope = $scope.$new(true); dScop ...
- bootstrap + angularjs + seajs构建Web Form前端(1)
bootstrap + angularjs + seajs构建Web Form前端(一) 简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark ...
- js弹框3秒后自动消失
开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...
- Bootstrap Modals(模态框)
http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html 描述 Bootstrap Modals(模态框)是使用定制的 Jquery ...
随机推荐
- OpenGL tutorial资源在mac yosemite下的cmake生成工程问题
如果你在使用cmake -G Xcode -Wno-dev OpenGL_Tutorial 时,出现了pThread.h not found的错误, 碰巧你和我一样使用的还是 2.8 版本的cmake ...
- 源码安装mysql 5.7.19数据库
1.系统要求yum install -y cmake make gcc gcc-c++ bison ncurses ncurses-devel 2.创建用户和组groupadd mysql & ...
- IAR仿真时绿色箭头一直指向汇编界面,而C界面没有
设置如下
- (面试题)有关Integer
今天在一家公司做了个面试题:运行下列代码,输出结果是什么 Integer a=new Integer("12"); Integer b=new Integer("12& ...
- rocketmq 学习记录-2
产品选型 我们在进行中间件选型时,一般都是通过下面几点来进行产品选型的: 1.性能 2.功能支持程度 3.开发语言(团队中是否有成员熟悉此中间件的开发语言,市场上此种语言的开发人员是否好招) 4.有多 ...
- php分享十八:网页抓取
一.抓取远程图片到本地,你会用什么函数? 方法1:利用readfile读取远程图片到缓冲中,然后写入新的文件 function grabImage($url, $filename = '') { if ...
- 用友iuap云运维平台支持基于K8s的微服务架构
什么是微服务架构? 微服务(MicroServices)架构是当前互联网业界的一个技术热点,业内各公司也都纷纷开展微服务化体系建设.微服务架构的本质,是用一些功能比较明确.业务比较精练的服务去解决更大 ...
- Shiro系列(3) - What is shiro?
什么是shiro? Shiro是apache的一个开源权限管理的框架,它实现用户身份认证,权限授权.加密.会话管理等功能,组成了一个通用的安全认证框架 使用shiro来实现权限管理,可以非常有效的提高 ...
- IOS开发之UIScrollVIew运用
UIScrollView可以实现在一个界面看到所有内容,同时也不需要担心所显示的内容超出屏幕的大小,当超出之后可以翻阅至下一页浏览. #pragma mark - UIScrollViewDelega ...
- Node + Express + vue2.0 + Webpack项目实践
技术 Express.Vue.Vue-Router.Vue-Resource.Webpack Vue vue 的组件化思想和 React 很像,一个 vue 组件将 html.css 和 js 都写在 ...