angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习
废话不说，直接上代码。可直接看效果，对着分析。。今天算是bootstrap 入门了，开心。。
突然居然很多事情就是那样，不要太多的畏惧，迈出第一步其实就成功了一半了。
<html ng-app="app">
<head> <script src="../lib/js/angular.js"></script>
<script src="../lib/js/ui-bootstrap-tpls-0.13.0 (1).js"></script>
<link href="../lib/bootstrap-3.3.4/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div ng-controller="appController">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<span>Message:{{message}}</span>
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item=item">{{ item }}</a>
<!--<a ng-click="test(item);">{{ item }}</a>-->
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script> <button class="btn btn-default" ng-click="showModal()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
<div class="col-xs-6">
<div class="well well-sm">I start to learn bootstrap css frow now on!!</div>
<div class="well well-lg">I start to learn bootstrap css frow now on!!</div>
<div class="well ">I start to learn bootstrap css frow now on!!</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default panel-primary" >
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default panel-success">
<div class="panel-heading">
<h1 class="panel-title">Panel title</h1>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Panel title</h1>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div> <!-- Table -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div> <!-- Table -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div> <!-- Table -->
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
</div>
</div>
<div class="col-xs-6">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button> <button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> Star
</button>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div> <!-- Table -->
<table class="table">
<tr>
<th>#</th>
<th>Month</th>
<th>Savings</th>
<th>Savings</th>
</tr>
<tr>
<th>1</th>
<td>January</td>
<td>$100</td>
<td>$100</td>
</tr>
<tr>
<th>2</th>
<td>January</td>
<td>$100</td>
<td>$100</td>
</tr>
<tr>
<th>3</th>
<td>January</td>
<td>$100</td>
<td>$100</td>
</tr>
<tr>
<th>4</th>
<td>January</td>
<td>$100</td>
<td>$100</td>
</tr>
</table>
</div>
</div>
</div>
</body>
<script>
angular.module('app', ['ui.bootstrap']).
service('DataService', ['$rootScope',
function($rootScope) {
this.data = {};
this.data.message = 'This is a message from a service';
this.data.items = ['item1', 'item2', 'item3'];
}
]).
controller('myModal', ['$scope', '$modalInstance', 'DataService',
function($scope, $modalInstance, dataService) {
$scope.data = dataService.data;
$scope.message = dataService.data.message;
$scope.items = dataService.data.items; $scope.selected = {
item: $scope.items[0]
};
$scope.test = function(item){
$scope.selected.item = item;
} $scope.ok = function() {
$modalInstance.close($scope.selected.item);
}; $scope.cancel = function() {
$modalInstance.dismiss('cancel');
}; }
]).
controller('appController', ['$scope', '$modal', '$log',
function($scope, $modal, $log) { // $scope.data = dataService.data; $scope.showModal = function() {
var modalInstances = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'myModal'
}); modalInstances.result.then(function(selectedItem) {
$scope.selected = selectedItem;
},function(){
$log.info('Modal dismissed at :'+new Date())
}) }; }
]); </script>
</html>
angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习的更多相关文章
- Bootstrap.之模态框 显示在遮罩层后面
Bootstrap.之模态框 显示在遮罩层后面 问题描述: 在使用bootstrap模态框,弹出的窗口在遮罩层后面,见图: 解决方案: 保证模态框的代码,所在的上一级(父元素)是body标签,即可.例 ...
- jQuery10种不同动画效果的响应式全屏遮罩层
遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层 效果预览 下载地址 实例代码 <div class="container"> <head ...
- Android UI设计--半透明效果对话框及activity(可做遮罩层)
下面是style的一些属性及其解释 <style name="dialog_translucent" parent="@android:style/Theme.Di ...
- [转]Ionic最佳实践-使用模态窗口modal
本文转自:http://m.blog.csdn.net/blog/betreex/45649689 原文地址:Ionic最佳实践-使用模态窗口modal 模态窗口的结构 在Ionic中,模态窗口通过$ ...
- BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- 多个按钮触发同一个Bootstrap自适应模态窗口
在项目中可能会面对这样的一个场景: 界面上有多个按钮,我们希望点击这些按钮弹出同一个模态窗口,但希望模态窗口的内容是动态生成的,即,点击每个按钮弹出的模态窗口内容不同. 通常情况下,一个按钮对应一个模 ...
- 使用jQuery和Bootstrap实现多层、自适应模态窗口
本篇实践一个多层模态窗口,而且是自适应的. 点击页面上的一个按钮,弹出第一层自适应模态窗口. 在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即 ...
- Bootstrap 模态窗口源码分析
前言: bootstrap的 js插件的源码写的非常好,也算是编写jquery插件的模范写法,本来还想大篇详细的分析一下呢,唉,没时间啊,很早之前看过的源码了,现在贴在了博客上, 300来行的代码,其 ...
- fancybox 在打开窗口前 先执行 js脚本,fancybox设置只能通过右上角关闭,fancybox遮罩层关闭
在默认情况下,fancybox点击之后弹出窗口,右上角带有一个XX,但是点击窗口的其他遮罩层或者是其他地方,都是可以关闭fancybox的,有些时候,我们不希望这样关闭,而是只能点击右上角关闭,那么设 ...
随机推荐
- over 分析函数之 lag() lead()
/*语法*/ lag(exp_str,offset,defval) over() 取前 Lead(exp_str,offset,defval) over() 取后 --exp_str要取的列 -- ...
- Chapter 1 First Sight——32
The class seemed to drag on longer than the others. 这堂课看起来比别的课要长. Was it because the day was finally ...
- 无论url请求什么.都可以拼接class类名.实例化.传递get参数-->给当前控制器-->传递给抽象父类-->都交给抽象父类.这个方法去处理call_user_func_array()
<?phpdefine('DS','/');define('A_PATH',str_replace('\\','/',dirname(__FILE__)).DS); //01获取到主程序目录cl ...
- LeetCode OJ 292.Nim Gam19. Remove Nth Node From End of List
Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...
- ECOS运行环境安装(一)
ECOS为上海商派公司研发的PHP电商框架.详情见 http://www.ec-os.net/doc.html 本文介绍CentOS6.x 64位下安装ECOS1.2运行环境的具体步骤: 1)需要准备 ...
- Centos7下安装numpy+matplotlib+scipy
摘自:http://litchiware.github.io/centos/2015/07/05/centos7%E4%B8%8B%E5%AE%89%E8%A3%85numpy+matplotlib+ ...
- Replication--进程无法在“xxxx”上执行“sp_replcmds”
错误消息:进程无法在“xxxx”上执行“sp_replcmds”. (源: MSSQL_REPL,错误号: MSSQL_REPL20011)获取帮助: http://help/MSSQL_REPL20 ...
- shell命令一行代码搞定【转】
查看文件内容-while: cat 1.txt|while read line;do echo $line;done while read line; do echo $line; done < ...
- java操作oracle的blob,clob数据
一.区别和定义 LONG: 可变长的字符串数据,最长2G,LONG具有VARCHAR2列的特性,可以存储长文本一个表中最多一个LONG列 LONG RAW: 可变长二进制数据,最长2G CLOB: ...
- servlet多次跳转报IllegalStateException异常
当发生在如下错误的时候,有一个方案可行, "java.lang.IllegalStateException: Cannot forward after response has been c ...