CODEWITHSUNDEEP
javascriptjqueryangularjsionic-framework
Ycon
Ycon

Reputation: 1950

Ionic modal- keep navbar/menu visible

I want to put my page into a modal-slide up,that keeps the menu bar static (as in, when the modal opens, the menu/top bar does not slide up).

The modal slide's up- but where the nav-bar/menu bar should be is white. The space is created (with class="has-header") but it is white.

enter image description here

By clicking on the magnify glass, the modal is activated on this site- click here. I unsuccessfully tried making a plunker (here).

Here is my code:

To open modal (in my .html)

<i class="ion-ios-search-strong" ng-click="refineevent()"></i>

Part of my js

$ionicModal.fromTemplateUrl('app/components/stores/stores.html', {
    scope: $scope,
    animation: 'slide-in-up'
}).then(function(modal){$scope.modal = modal;});

$scope.refineevent = function(){$scope.modal.show();};

$scope.closeModal = function(){$scope.modal.hide();};


$scope.$on('modal.shown', function(){console.log('Modal is shown!');});

    }

And my modal.html file:

<ion-modal-view>
<ion-view name="stores"><ion-pane ng-controller="storesCtrl">

            <ion-content class="has-header">
  ...
        </ion-content>

</ion-view>
</ion-modal-view>

Upvotes: 0

Views: 1391

Answers (1)

Cozzbie
Cozzbie

Reputation: 1055

For modals you will have to create the header. So...

<ion-modal-view>
<ion-header-bar>
    <button class="button button-clear icon ion-drag"></button>
    <h1 class="title">LOGO</h1>
    <button class="button button-clear icon ion-hanger"></button>
</ion-header-bar>
    <ion-content>
    </ion-content>
</ion-modal-view>

Upvotes: 1

Related Questions