$ionicModal与boostrap冲突
发布于 2年前 作者 zerozaki0752 1160 次浏览 来自 问答

使用$ionicModal弹出的model窗口

工程引入boostrap3.3.4后 model窗口变成一个黑色的modal层 没有动画 也没有内容

下面是代码,代码很简单,没有及任何特技,然而也并没有出来效果…

index.html

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

问题不太容易看哇, 我建议你把代码放到 http://codepen.io 或者 http://runjs.cn 上,然后把地址发过来,这样大家查看你的问题和调试都方便一点,你的问题也更容易得到解答吧

测试过,没有问题,检查一下代码是不是有拼写错误的地方

问题发现了 是在index.html中的 引入了bootstrap-3.3.4.min.css

<link rel="stylesheet" href="lib/bootstrap/bootstrap-3.3.4.min.css">

去掉就好了 不过实际上我并没有使用这个css 不知道如何解决这个问题…

<link href="lib/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">


回到顶部