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();">關(guān)閉</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();
};
});
人生最曼妙的風(fēng)景,竟是內(nèi)心的淡定與從容!
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