2016-02-07 3 views
0

Я хочу, чтобы моя страница была в модальном слайде, что хранит строку меню статическую (как в случае, когда модальная функция открывается, меню/верхняя панель не сдвигается вверх).Ionic modal-keep navbar/menu visible

Модальный слайд вверх, но там, где должна быть панель навигации/меню, она белая. Пространство создается (с классом = "has-header"), но оно белое.

enter image description here

При нажатии на MAGNIFY стекле, модальный активируется на этом сайт- click here. Я безуспешно пытался сделать плункер (here).

Вот мой код:

Чтобы открыть модальный (в моем .html)

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

Часть моего 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!');}); 

    } 

И мой файл modal.html:

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

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

</ion-view> 
</ion-modal-view> 
+0

Я не думаю, что вам нужно использовать '' inside ''. Попробуйте удалить его и использовать '' между '' и '' –

+0

Я сделал это, и он по-прежнему показывает пустое пустое пространство, где должно быть меню. Используя «z-index» с CSS, я могу сделать его видимым, однако его нельзя использовать/щелкнуть. Он сидит «под» модальным. Есть идеи? – Ycon

+0

Модаль лежит над всеми другими видами, поэтому вы не можете использовать меню. Если вы намерены не использовать кнопку меню, то использование ионного заголовка будет достаточным для модального –

ответ

1

Для модалов вам необходимо будет создать заголовок. Итак ...

<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>