CODEWITHSUNDEEP
javascriptmodal-dialogionic-frameworkhybrid-mobile-app
TheGarrett
TheGarrett

Reputation: 311

How to automatically open modal on app launch?

Currenly I have a modal which opens up when a button is clicked. However this isn't what I want, I want the modal to open up when the app is launched. My goal is to create an introduction modal which only appears the first time the user uses the app. However I'm having problems opening the modal on app launch. The first step is to open the modal on app launch. Then the second step is create a function that saves on the local storage if the user has been on the app before. If not then it will display the modal. If yes then it will hide the modal. I've seen examples of this function on http://jsfiddle.net/zono/vHG7j/ however I also can't get this working with my current modal. Would deeply appreciate help, thanks in advance :)

My modal:

<div class="modal">
  <ion-header-bar>
  <h1 class="title">Edit Contact</h1>
</ion-header-bar>

<ion-content>
  <div class="list">
    <label class="item item-input">
      <span class="input-label">Name</span>
      <input type="text" ng-model="contact.name">
    </label>
    <label class="item item-input">
      <span class="input-label">Info</span>
      <input type="text" ng-model="contact.info">
    </label>
  </div>

  <button class="button button-full button-energized" ng-click="closeModal()">Done</button>
</ion-content>

</div>

JS:

angular.module('Mob').controller('TeamCtrl', function($scope, $ionicModal) {

/* Modal */
$ionicModal.fromTemplateUrl('intro-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
})

Upvotes: 0

Views: 2535

Answers (1)

manzapanza
manzapanza

Reputation: 6215

You could try someting like this:

angular.module('Mob').controller('TeamCtrl', function($scope, $ionicModal) {

  /* Modal */
  $ionicModal.fromTemplateUrl('intro-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });

  // opens the modal only one time
  if(!localStorage.getItem("popupWasShown")){
    $scope.modal.show();
    localStorage.setItem("popupWasShown", true);
  }

});

Upvotes: 2

Related Questions