模态框的引入

前言：
在显示竞价结果时，引入了模态框，模态框在使用之前要先引入bootstrap.css（bootstrap.jsbootstrap.min.js，两种js文件的区别是一个未压缩一个压缩，无需全部引入）。所有插件都依赖jQuery（在www/js/lib/jquery也就是说，jQuery必须在所有插件之前引入页面）
bootstrap引入方法：
将文件bootstrap.js或bootstrap.min.js放到所在项目的www/lib/js下并index.html中添加：

 %link(rel="stylesheet" type="text/css" href="css/bootstrap.css")//新引入
 %link(rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css")
 %link(rel="stylesheet" type="text/css" href="css/bootstrapswitch.css")
 %link(rel="stylesheet" type="text/css" href="css/bootstrapswitch-custom.css")
 %link(rel="stylesheet" type="text/css" href="css/font-awesome.css")
 %link(rel="stylesheet"type="text/css"href="css/index.css")   
 %link(rel="stylesheet"type="text/css"href="lib/js/jquery/jquery.mobile-1.2.0.min.css")//新引入

//以上几条若无需引进，注意最后一条，由于之前没有引进，把party_bid显示在模拟器上时不显示任何样式,只是聚在左上角

%body(ng-controller="MainCtrl")
    %mobile-view
    %script(lang="javascript" src="lib/js/jquery/jquery-1.8.2.min.js")//新引入（注意引进的先后顺序）
    %script(lang="javascript" src="lib/js/angular/bootstrap.js")//新引入

在哪个界面显示模态框就在那个页面haml中写

模态框实例：

.modal.fade#myModal//定义id，并且让模态框退色及是页面颜色变暗
  .modal-dialog//引入对话框
    .modal-content//写入内容
      .modal-header
        %button.close(aria-hidden= "true"  data-dismiss= "modal" type = "button") &times;
        %h4.modal-title
      .modal-body
        %center
          {{bid_success_person.name}}&nbsp&nbsp￥{{bid_success_person.price}}
        %br
        %center
          {{bid_success_person.phone}}
        %br
        %center
          竞价成功！
      .modal-footer//位置不限，注意缩进，否则易出现只是模态框闪动一下却没有显示它的header，body，footer部分的情况。

然后在controller里面控制合适显示合适隐藏：

function BidResultController($scope, $navigate, $timeout)//$timeout设置消退时间

$timeout(function () {
                $('#myModal').modal('show');
                $timeout(function () {
                    $('#myModal').modal('hide');
                }, 3000)

            }, 0)//设置模态框在进入页面显示，3秒后消失

更多模态框内容，请参考：http://v3.bootcss.com/javascript/#modal

猜你喜欢