Ycon Ycon -5 years ago 239
jQuery Question

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-view name="stores"><ion-pane ng-controller="storesCtrl">

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


Answer Source

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

    <button class="button button-clear icon ion-drag"></button>
    <h1 class="title">LOGO</h1>
    <button class="button button-clear icon ion-hanger"></button>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download