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 ...
随机推荐
- 【HTML】input标签中alt属性和title属性的比较
经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...
- go test命令參数问题
go test命令參数问题 在使用go test对go代码进行单元測试的时候,遇到关于命令參数的问题.google了一下,没有找到非常好的说明,其实就是一些细节而已. 问题是这种,在进行单元測试的时候 ...
- java与C++之间进行SOCKET通讯要点简要解析
原文链接: http://blog.csdn.net/hslinux/article/details/6214594 java与C++之间进行SOCKET通讯要点简要解析 hslinux 0.篇外语 ...
- MFC动态按钮的创建及其消息响应 和 自定义消息
原文链接: http://www.cnblogs.com/gaohongchen01/p/4046525.html 动态按钮(多个)的创建: 1.在类中声明并定义按钮控件的ID #define IDC ...
- [转]Spring mvc interceptor配置拦截器,没有登录跳到登录页
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.s ...
- [转]JDBC快速入门教程
JDBC是什么? JDBC API是一个Java API,可以访问任何类型表列数据,特别是存储在关系数据库中的数据.JDBC代表Java数据库连接. JDBC库中所包含的API任务通常与数据库使用: ...
- 转 分享我在阿里工作十年接触过Java框架设计模式
转 原文: 分享我在阿里工作十年接触过Java框架设计模式 一.前言 说起来设计模式,大家应该都耳熟能详,设计模式代表了软件设计的最佳实践,是经过不断总结提炼出来的代码设计经验的分类总结,这些模式或者 ...
- navicat cannot create oci 解决
1.新建连接 2.连接时候报错 3.解决 3.1.选择对应版本OCI 3.1.配置OCI[工具->选项...]
- 求最大连续和——dp
输入一组整数,求出这组数字子序列和中最大值.也就是仅仅要求出最大子序列的和,不必求出最大的那个序列. 比如: 序列:-2 11 -4 13 -5 -2,则最大子序列和为20. 序列:-6 2 4 -7 ...
- 云服务设置多台tomcat开机自启动
紧接此篇文章:http://www.cnblogs.com/leechenxiang/p/7091731.html 1. 修改profile,添加红框内6行代码 vim /etc/profile 代码 ...