废话不说，直接上代码。可直接看效果，对着分析。。今天算是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. 让上下两个DIV块之间有一定距离或没有距离

    1.若想上下DIV块之间距离,只需设定:在CSS里设置DIV标签各属性参数为0div{margin:0;border:0;padding:0;}这里就设置了DIV标签CSS属性相当于初始化了DIV标签 ...

  2. 【第四篇】androidEventbus源代码阅读和分析

    1,分析androidEventbus的注册源代码: 我们在使用androidEventbus的第一步是注册eventbus,如下代码: EventBus.getDefault().register( ...

  3. Logistic Regression 模型简介

    逻辑回归(Logistic Regression)是机器学习中的一种分类模型,由于算法的简单和高效,在实际中应用非常广泛.本文作为美团机器学习InAction系列中的一篇, 主要关注逻辑回归算法的数学 ...

  4. 用python写刷票程序

    刷票一般要突破以下限制: 1.验证码识别 2.同一ip不可连续投票 解决办法 1.用tesseract工具,链接在此 https://code.google.com/p/tesseract-ocr/  ...

  5. 用VBS控制鼠标的实现代码（获取鼠标坐标、鼠标移动、鼠标单击、鼠标双击)

    网上搜到的答案普遍是VBS无法实现,或者是要用第三方COM(ActiveX?)组件.我对第三方组件是很反感的,使用第三方组件毫无可移植性可言,因为别人的系统中不一定注册了这个组件.我的建议是,尽量不要 ...

  6. IE的CSS滤镜不过只支持IE可以创建幻灯片等一些炫酷的效果

    <img src="img/logo.png"  style="filter:xray"/>仅仅

  7. Codeforces Round #364 (Div. 2) C.They Are Everywhere

    C. They Are Everywhere time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  8. Broken Keyboard（悲剧文本）

    你有一个键盘,键盘上所有的键都能正常使用,只是Home键和End键有时会自动按下.你并不知道这一情况,而是专心地打稿子,甚至连显示器都没开电源.当你打开显示器之后,展现在你面前的是一段悲剧文本.你的任 ...

  9. Eclipse中配置weka，以及添加算法

    Eclipse中配置weka 1 找到weka的安装位置,寻找weka的压缩文件weka-src.jar,将压缩文件解压,解压出的文件夹weka-src. 2 打开Eclipse,新建Java pro ...

  10. 使用Visual C++编程

    1.Visual C++的主要组件 Visual C++支持遵循C++11语言标准的C++语句,C++11语言标准是在ISO/IEC 14882:2011文档中定义的.Visual C++还没有实现该 ...