使用$ionicModal彈出的model窗口工程引入boostrap3.3.4後model窗口變成一個黑色的modal層沒有動畫也沒有內容下面是代碼大家可以試試，代碼很簡單，沒有及任何特技，然而也並沒有出來效果… index.html {代碼....

可以只引入 bootstrap 所需的部分，例如 Grid system，Basic utilities，Responsive utilities 參考 http://forum.ionicframework.com/t/responsive-grid-layout/707/20

angular.js - $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();
    };

});

黄舟2756 天前628

angular.js - $ionicModal與boostrap衝突

全部回覆(1)我來回復