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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -