修改

Question

我正在做一个离子混合应用程序，我有一个模态

的问题

当我调用modal.show（）方法时，我看到blackdropdown但不是实际的模态内容（我复制粘贴了文档中的示例）。检查铬中的模态对象我看到它很好地实现了。

我认为这与我的项目设置相关，所以生病了吗

index.html（占位符）

 <body ng-app="myApp">      
<ion-pane>   
  <ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-pane>
</body>

包含调用模式的按钮的页面

<ion-view class="backGround-clouds">
<ion-header-bar class="transparent" ng-controller="MenuController" align-title="center" style="margin-top:10px;">
    <div class="buttons" style="margin-top:20px;">    
    <button class="button header-right-decor" ng-click="returnToLastView()"><i class="ion-person" style="font-size:2em;"></i></button>
      <h1 class="title" style="height:65px;"><img src="img/new/logo.png"/></h1>
  </div>
 </ion-header-bar>   
<ion-content style="margin-top:75px;">

  <div id="errors" class="center" style="color:red;text-align:center;">
    <ul>
      <li ng-repeat="error in errors">{{error}}</li>
    </ul>
  </div>
  <div class="center login-title">Transactions List</div>


<div class="row">
       <div class="col">Date</div>
       <div class="col">Transaction</div>
       <div class="col">Amount</div>
       <div class="col"></div>
</div>

<div class="row" style="margin:0px;" ng-repeat="transaction in transactions">
       <div class="col">{{transaction.Date | date:"MM/dd/yy"}}</div>
       <div class="col">{{transaction.ProPayID}}</div>
       <div class="col">${{transaction.Amount}}</div>
       <div class="col"><button class="button-transaction" ng-click="openTransactionDetail(1)">Detail</button></div>
</div>
</ion-content>
</ion-view>

最后是我的简单modal.html

  <div class="modal">
    <header class="bar bar-header bar-positive">
      <h1 class="title">Sample Modal</h1>
    </header>
    <ion-content has-header="true" padding="true">

      <p ng-repeat="data in boulderDataChanges">{{data}}</p>
      <button class="button" ng-click="fakeLogin()">Fake Login</button>
    </ion-content>
  </div>

如前所述，控制器正在正确调用它，但视图只显示没有模态标记的黑色窗帘

Answer 1

原来问题是我的项目中有一个bootstrap css而且它杀死了离子模态css

当我从索引

中删除此行时

<link href="css/bootstrap.min.css" rel="stylesheet">

它像魅力一样工作

顺便说一下我使用这个css是因为即时通讯使用角度日期选择器小部件

Answer 2

如果您的index.html文件包含

<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">

将其删除。然后它就可以了。

修改

这是因为.model bootstrap.css 中的display:none类设置了response=handle_request(request) 所以你可以简单地修改bootstrap（只需删除模型）。 http://getbootstrap.com/customize/?id=e025f1d7d08b43d76509f61bb1bf24d0

Answer 3

如果你想保持bootstrap unmodifed只需将这个额外的css规则添加到你的项目中，这将解决黑色背景问题：

.modal-wrapper .modal { display:block; }

离子框架模式仅显示没有实际内容的黑色下拉列表

3 个答案:

修改