Utilisez $ionicModal pour faire apparaître la fenêtre du modèle
Après que le projet ait introduit boostrap3.3.4, la fenêtre du modèle devient une couche modale noire sans animation ni contenu
Voici le code que vous pouvez essayer. Le code est très simple et ne nécessite aucun effet spécial. Cependant, il n'a aucun effet...
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>
accueil.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 front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous ne pouvez introduire que les éléments nécessaires au bootstrap, tels que le système Grid, les utilitaires de base et les utilitaires réactifs
Référence http://forum.ionicframework.com/t/responsive-grid-layout/707/20