Gunakan tetingkap model timbul $ionicModal
Selepas projek memperkenalkan boostrap3.3.4, tetingkap model menjadi lapisan modal hitam tanpa animasi dan tiada kandungan
Berikut ialah kod yang boleh anda cuba Kod ini sangat mudah dan tidak memerlukan sebarang kesan khas..
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');
pengawal.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] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda hanya boleh memperkenalkan bahagian yang diperlukan untuk bootstrap, seperti sistem Grid, Utiliti Asas dan Utiliti Responsif
Rujukan http://forum.ionicframework.com/t/responsive-grid-layout/707/20