$ionicModal与boostrap冲突
使用$ionicModal弹出的model窗口
工程引入boostrap3.3.4后 model窗口变成一个黑色的modal层 没有动画 也没有内容
下面是代码大家可以试试，代码很简单，没有及任何特技，然而也并没有出来效果…
index.html
<link rel="stylesheet" href="lib/bootstrap/bootstrap-3.3.4.min.css">
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
home.html
<ion-view>
<button ng-click='openModal()'>modal</button>
</ion-view>
modal.html
<ion-modal-view>
<ion-header-bar class="bar-energized">
<h1 class="title">ion-modal-view</h1>
<a class="button" ng-click="closeModal();">关闭</a>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-modal-view>
app.js
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
templateUrl: "templates/home.html",
controller: 'HomeCtrl'
});
$urlRouterProvider.otherwise('/home');
controller.js
app.controller('HomeCtrl', function($scope, $state, $ionicModal) {
$ionicModal.fromTemplateUrl("templates/model.html", {
scope: $scope,
animation: "slide-in-up"
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
可以只引入 bootstrap 需要的部分，例如 Grid system，Basic utilities，Responsive utilities
参考 http://forum.ionicframework.com/t/responsive-grid-layout/707/20