废话不说，直接上代码。可直接看效果，对着分析。。今天算是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. 基于ZooKeeper的分布式Session实现

    1．   认识ZooKeeper ZooKeeper—— “动物园管理员”.动物园里当然有好多的动物,游客可以根据动物园提供的向导图到不同的场馆观赏各种类型的动物,而不是像走在原始丛林里,心惊胆颤的被 ...

  2. 拦截asp.net mvc输出流做处理, 拦截HTML文本（asp.net MVC版)

    以前的一个贴子写过一个webForm的拦截HTML输出流的版本,最近用到mvc时用同样的方式发生一些问题. 如下图 查了好久也不知道啥原因. 好吧, 我最后选择放弃. 想起以前自定义Response. ...

  3. 《剑指Offer》算法题——“旋转数组”的最小数字

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个非递减序列的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转,该数 ...

  4. apk的重签名

    1.      生成Android APK包签名证书 1).     在doc中切换到jdk的bin目录 cd C:\Program Files\Java\jdk1.6.0_18\bin 2).    ...

  5. JavaScript高级程序设计：第四章

    变量.作用域和内存问题 1.ECMAScript变量可能包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,引用类型值指的是有多个值构成的对象. 2.动态的属性:定义一个基 ...

  6. MySQL数据表中内容大小写区分的设置

    MYSQL在默认的情况下查询是不区分大小写的,例如:    ? 1 2 3 4 5 6 7 mysql> create table t1( -> name varchar(10)); Qu ...

  7. Update Case的用法与execute执行字符串

    摘自于网路:http://www.cnblogs.com/joinger/articles/1297160.html update h_crm_SafetyAccessUser set         ...

  8. oracle恢复一个数据表的方法

    今天提交给客户方一个sql脚本去跟新历史数据,结果客户那边的部署人员犯了一个错误,直接拿系统账号去部署,结果第一段代码没有执行成功,结果第二段代码却执行成功了,并且已经提交了的,....由于事前没有备 ...

  9. opencv----彩色图像对比度增强

    图像对比度增强的方法可以分成两类:一类是直接对比度增强方法;另一类是间接对比度增强方法. 直方图拉伸和直方图均衡化是两种最常见的间接对比度增强方法. 直方图拉伸是通过对比度拉伸对直方图进行调整,从而“ ...

  10. Ubuntu下修改DNS重启也能用的方法

    1.通过修改:/etc/resolvconf/resolv.conf.d/base(这个文件默认是空的)实现 内容填上需要修改的nameserver