模态框的初步认识

前言：引入模态框之前要先引入bootstrap.js文件，将bootstrap.js文件放到party_bid/www/js/angular下，在index中添加代码引入文件

 

1 引入模态框遇到的问题

我在引入模态框之后遇到了一个问题，就是模态框的控制，本来js里的控制函数应该控制模态框3秒后自动消失，但是控制函数却控制了背景的显示时间，并且手动模态框消失业没有任何反应

解决办法：我遇到的这个问题是jquery的版本不合适，然后从网上找了一个新版本的jquery文件，放到了jquery里就可以了。提供一个网址，可以下载合适的版本文件http://jquery.com/download/  (在找到的文件名字后添加.min就可以打开文件复制文件内容即可免去下载)

 

2 引入bootstrap.js文件

%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/index.css")
%link(rel="stylesheet"type="text/css"href="lib/js/jquery/jquery.mobile-1.2.0.min.css")
%script(lang="javascript" src="lib/js/jt-logic.js/conditions.js")
%script(lang="javascript" src="lib/js/jt-notify.js/notify.js")

 

3 模态框的的引入

.modal.fade#ModalSuccess(role="dialog") 
  .modal-dialog
    .modal-content 
      .modal-header   
       %button( type = "button" class="close" data-dismiss = "modal" aria-hidden = "true") ×
        %h4.modal-title(在这里可以设置模态框的标题)
      .modal-body     
       %center
         /(编辑模态框里显示的内容)
      .modal-footer

 

4 在js里写控制模态框显示的时间

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

 

5 方法解释

$('#ModalSuccess').modal('show')

打开模态框，通过绑定的ModalSuccess来控制打开的是竞价成功的对话框。

$('#ModalSuccess').modal('hide')

关闭模态框，在规定的的时间到了之后，模态框自动隐藏。

 

6 对于浮动显示竞价结果成功和失败显示结果是不一样的，可以用ng-show来控制两种竞价结果的浮动显示。

实例：

%footer
  %div(ng-show="success") 
   %pre 
   竞价结果：竞价成功！
%footer
  %div(ng-show="fail")
   %pre 
   竞价结果：竞价失败！

当success=true时显示的是成功的竞价结果，当fail=true时，显示的是失败的竞价结果。