问题描述
使用$ionicModal弹出的model窗口
工程引入boostrap3.3.4后 model窗口变成一个黑色的modal层 没有动画 也没有内容
下面是代码大家可以试试，代码很简单，没有及任何特技，然而也并没有出来效果…
index.html
<link rel='stylesheet' href='https://www.6hehe.com/wenda/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 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(); };});
问题解答
回答1：可以只引入 bootstrap 需要的部分，例如 Grid system，Basic utilities，Responsive utilities
参考 http://forum.ionicframework.com/t/responsive-grid-layout/707/20
