国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

angular.js - $ionicModal conflicts with boostrap
黃舟
黃舟 2017-05-15 16:53:04
0
1
717

Use $ionicModal pop-up model window

After the project introduces boostrap3.3.4, the model window becomes a black modal layer with no animation and no content

The following is the code that you can try. The code is very simple and does not require any special effects. However, it has no effect...

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');

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();
    };

});
黃舟
黃舟

人生最曼妙的風(fēng)景,竟是內(nèi)心的淡定與從容!

reply all(1)
巴扎黑

You can only introduce the parts required by bootstrap, such as Grid system, Basic utilities, and Responsive utilities

Reference http://forum.ionicframework.com/t/responsive-grid-layout/707/20

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template