废话不说，直接上代码。可直接看效果，对着分析。。今天算是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)的初步学习的更多相关文章

  1. Bootstrap.之模态框 显示在遮罩层后面

    Bootstrap.之模态框 显示在遮罩层后面 问题描述: 在使用bootstrap模态框,弹出的窗口在遮罩层后面,见图: 解决方案: 保证模态框的代码,所在的上一级(父元素)是body标签,即可.例 ...

  2. jQuery10种不同动画效果的响应式全屏遮罩层

    遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层 效果预览 下载地址 实例代码 <div class="container"> <head ...

  3. Android UI设计--半透明效果对话框及activity(可做遮罩层)

    下面是style的一些属性及其解释 <style name="dialog_translucent" parent="@android:style/Theme.Di ...

  4. [转]Ionic最佳实践-使用模态窗口modal

    本文转自:http://m.blog.csdn.net/blog/betreex/45649689 原文地址:Ionic最佳实践-使用模态窗口modal 模态窗口的结构 在Ionic中,模态窗口通过$ ...

  5. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  6. 多个按钮触发同一个Bootstrap自适应模态窗口

    在项目中可能会面对这样的一个场景: 界面上有多个按钮,我们希望点击这些按钮弹出同一个模态窗口,但希望模态窗口的内容是动态生成的,即,点击每个按钮弹出的模态窗口内容不同. 通常情况下,一个按钮对应一个模 ...

  7. 使用jQuery和Bootstrap实现多层、自适应模态窗口

    本篇实践一个多层模态窗口,而且是自适应的. 点击页面上的一个按钮,弹出第一层自适应模态窗口. 在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即 ...

  8. Bootstrap 模态窗口源码分析

    前言: bootstrap的 js插件的源码写的非常好,也算是编写jquery插件的模范写法,本来还想大篇详细的分析一下呢,唉,没时间啊,很早之前看过的源码了,现在贴在了博客上, 300来行的代码,其 ...

  9. fancybox 在打开窗口前 先执行 js脚本,fancybox设置只能通过右上角关闭,fancybox遮罩层关闭

    在默认情况下,fancybox点击之后弹出窗口,右上角带有一个XX,但是点击窗口的其他遮罩层或者是其他地方,都是可以关闭fancybox的,有些时候,我们不希望这样关闭,而是只能点击右上角关闭,那么设 ...

随机推荐

  1. select 1 from table

    1.select 1 from mytable;与select anycol(目的表集合中的任意一行) from mytable;与select * from mytable 作用上来说是没有差别的, ...

  2. hdu_3067_小t的游戏(脑洞)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=3067 题意:中文,不解释 题解:一看就知道是要找规律的题,都是有循环节的,看代码. #include ...

  3. LeetCode OJ 96. Unique Binary Search Trees

    Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...

  4. model中字段格式验证

    注释部分在前端不显示 /// <summary> /// 链接地址 /// </summary> [Display(Name = "链接地址")] //[D ...

  5. shell之路【第三篇】流程控制

    if语句 if ... fi 语句: if ... else ... fi 语句: if ... elif ... else ... fi 语句. 注意: expression 和方括号([ ])之间 ...

  6. .Net下HTTP访问穿越多层代理的方法以及代理服务器的验证 转载

    https://blog.williamgates.net/2006/07/aspdotnet-through-multi-proxy/ 首先,通过普通的匿名透明代理的方法,是直接使用Socket发送 ...

  7. Anton and Making Potions

    Anton and Making Potions time limit per test 4 seconds memory limit per test 256 megabytes input sta ...

  8. T-shirts Distribution

    T-shirts Distribution time limit per test 1 second memory limit per test 256 megabytes input standar ...

  9. AutoTile 自动拼接（一） 学习与实践

    恩,大家好,这两天江苏冷空气袭击,下了今年 第一场第二场雪. 不过今天我要说的 ,和 上面的 屁关系都没有. 今天要说的是 2d无缝自动拼接.大家有没有玩过  RPG Maker VX Ace. 类似 ...

  10. svn 设置文件可执行权限

    本地文件在commit到仓库之前若没有chmod +x 权限的话,那在svn仓库里的文件将会保持当前无可执行属性状态. 即使在本地chmod +x filename 之后,再提交到仓库也是没有用的.c ...