javascript - How to overlay a popup message on top of an ionic navigation bar - ion-nav-bar -
i trying popup message appear @ top of screen on top of navigation bar (ion-nav-bar). can appear below.
the css div using message is:
.notification-message { position: fixed; top: 0px; height: 60px; padding-top:10px; width: 100%; min-width: 100%; color: white; background-color: #656565; text-align: center; vertical-align: middle; }
the html page message div in file watchlist.html:
<ion-view view-title="cues - watch list"> <ion-content> <div ng-hide="notificationmessage" class="notification-message">{{messagecontents}}</div> <ion-list> <ion-item ng-repeat="watchlistitem in watchlist" href="#/app/trailer/{{watchlistitem.id}}"> <div class="watchlist-movie-thumb"> <img class="movie-thumb-image" src="{{watchlistitem.picture}}"> </div> <div class="col-75 watchlist-title-genre-container"> <div class="watchlist-movie-title"> {{watchlistitem.title}} </div> </div> </ion-item> </ion-list> </ion-content> </ion-view>
the ion-nav-bar defined in side menu file follows:
<ion-side-menus enable-menu-with-back-views="false"> <ion-side-menu-content> <ion-nav-bar class="header-text"> <!-- removed bar-stable --> <ion-nav-back-button> </ion-nav-back-button> <ion-nav-buttons side="left"> <button class="button button-icon button-clear" menu-toggle="left"> <i class="icon header-bar-icon ion-navicon"></i> </button> </ion-nav-buttons> <ion-nav-buttons side="right"> <button class="button button-icon button-clear" ng-click="shareanywhere()"> <i class="icon header-bar-icon ion-ios-upload-outline"></i> </button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view name="menucontent"></ion-nav-view> </ion-side-menu-content> <ion-side-menu side="left"> <ion-header-bar class="bar-stable"> <h1 id="menu-heading">menu</h1> </ion-header-bar> <ion-content> <ion-list> <ion-item menu-close href="#/app/watchlist"> watch list </ion-item> </ion-list> </ion-content> </ion-side-menu> </ion-side-menus>
the controller code shows message popup is:
$scope.messagecontents = "you not have movies in watch list yet. why not add some?"; $scope.notificationmessage=false; $timeout(function () { $scope.notificationmessage = true; }, 3000);
Comments
Post a Comment