废话不说，直接上代码。可直接看效果，对着分析。。今天算是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. codeforce Gym 101102A Coins （01背包变形）

    01背包变形,注意dp过程的时候就需要取膜,否则会出错. 代码如下: #include<iostream> #include<cstdio> #include<cstri ...

  2. 使用monit搭建一个监控系统

    上周用monit搭建或者说定制了一个监控系统,来监控服务器发生事情.当然了主要是监控异常,因为我们的产品属于服务器类型,很多进程都daemon,要不停的运行.我们搭建监控目的不过是出现问题能够及时的知 ...

  3. DOM操作-根据name获取网页中的全部复选框

    描述: 与id不同,多个元素可以使用相同的name属性,如果需要获取这一类元素的DOM对象,就需要使用getElementsByName()函数 代码: <!DOCTYPE html> & ...

  4. linux和win7设置静态ip

    ubuntu 静态ip设置 检查网络ifconfig (不是ipconfig)必须有2个地址一个回送地址:127.0.0.1一个实际地址:192.168.3.58 sudo vim /etc/netw ...

  5. 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 ...

  6. golang vs java

    http://programmers.stackexchange.com/questions/83780/how-fast-can-go-go In terms of language design, ...

  7. GitHub这么火，程序员你不学学吗？ 超简单入门教程 【转载】

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub. 本文章由做全栈攻城狮-写代码也要读书,爱全栈,更爱生活.原创.如有转载,请注明出处. GitHub是什么? GitHub首先是个分布式 ...

  8. 安卓srcCompat弄死我了

    <ImageView android:layout_width="150dp" android:layout_height="120dp" app:src ...

  9. springmvc上传图片，发送邮件

    package hcxAction; import hcxMode.Advertises; import hcxMode.Areas; import hcxMode.Saveresume; impor ...

  10. ajax实例及实现文本框异步搜素

    search.jsp(WebContent/jsp/search.jsp) <%@ page language="java" contentType="text/h ...