废话不说，直接上代码。可直接看效果，对着分析。。今天算是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. JPA的介绍

    一.JPA概述 1.JPA是什么? JPA:Java Persistence API:用于对象持久化的 API,JPA是Java EE 5.0 平台标准的 ORM 规范, 使得应用程序以统一的方式访问 ...

  2. Qt错误：类中使用Q_OBJECT宏导致undefined reference to vtable for "xxx::xxx"错误的原因和解决方法

    在进行Qt编程的时候,有时候会将类的定义和实现都写在源文件中,如果同时在该类中使用信号/槽,那么可能就会遇到 undefined reference to vtable for "xxx:: ...

  3. c语言-经验之谈

    如果你是一个大牛,那就直接忽略这里. 如果你是一个新手,请继续向下看. 在自学计算机的路上真的很悲惨,如果你是在学校里面学习还算比较幸运. 针对编程来说,在学校里面学习的只是学会了语言,而很少有人学会 ...

  4. DLL and LIB

    在StackOverflow中看到一个提问“what's the difference between DLL's and LIB's?” 有如下回复值得参考: 回复一:

  5. 简单介绍如何使用robotium进行自动化测试

    1.      创建一个简单的工程()作为被测程序,运行后显示如下界面: 2.      创建一个Test Project 1).     打开eclipse,选择File->New->P ...

  6. python中telnetlib模块的使用

    一.Windows下开启Telnet服务 (详见:与Win7防火墙无缝结合 Telnet功能测试) 1.Windows 2000/XP/2003/Vista:默认已安装但禁止了Telnet服务 (1) ...

  7. ContentPlaceHolderID属性

    用来对应包含与当前内容关联的 ContentPlaceHolder 的 ID啊 说白了就是去找母版页相应的ContentPlaceHolder ,然后把内容扔进那里面去 <asp:Content ...

  8. git基本命令--status, add, diff, commit, log

    git status: git status命令的输出十分详细,但其用语有些繁琐. 如果你使用 git status -s 命令或 git status --short 命令,你将得到一种更为紧凑的格 ...

  9. python 输出重定向

    使print既打印到终端,又写入文件 class Tee(object): def __init__(self,*files): self.files = files def write(self,o ...

  10. hdu_5734_Acperience

    题目连接:hdu_5734_Acperience 多校的题我还是贴官方题解的好,方便快捷,省事!! #include<cstdio> #include<cmath> #defi ...