webnugget

Create a Terms&Conditions Modal in Foundation for Apps

Because Foundation for App’s ModalFactory doesn’t support returning values from a Modal I integrated angular-modal-service and a0-angular-storage to show a Terms&Conditions-Modal when the app is launched for the first time.

Just follow the steps below:

1.

bower install angular-modal-service

2.

bower install a0-angular-storage

3.

add both Modules as dependencies in your app.js

    angular.module('application', [
    'ui.router',
    'ngAnimate',
    //app modules
    'angular-storage',
    'angularModalService',
    //foundation
    'foundation',
    'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations'])

4.

Inject them in your run-block

	function run(store, ModalService) {
   	FastClick.attach(document.body);
}

5.

add the following code to your run-block

	if (!store.get('termsaccepted')) {
    	var modalOptions = {
        	templateUrl: 'templates/modal.html',
            controller: 'ModalController'
        };
        ModalService.showModal(modalOptions).then(function(modal) {
        	modal.close.then(function(result) {
                if (result) {
                    store.set('termsaccepted', true);
                }
  			});
    	});
	}

6.

save modal.html in templates folder

    <div class="modal-overlay is-active" id="modal"  >
        <aside class="modal is-active">
            <a data-ng-click="closeModal()" class="close-button">×</a>
                <div class="grid-content">
                  <p> your terms and conditions</p>
                  <button type="submit" class="button medium" ng-click="close(true)">Accept</button>
               </div>
            </div>
         </aside>
    </div>

7.

add a ModalController in your app.js

	  angular.module('application').controller('ModalController', function($scope, close) {	
      $scope.close = function(result) {
          close(result);
      };
	  });

8.

open your gulpfile and add:

    'bower_components/angular-modal-service/dst/angular-modal-service.min.js',
    'bower_components/a0-angular-storage/dist/angular-storage.min.js',

to var foundationJS after angular

Working Example:

https://github.com/webnugget/FoundationApps-Modal-Demo

  • https://github.com/auth0/angular-storage
  • https://github.com/dwmkerr/angular-modal-service
  • https://github.com/zurb/foundation-apps

Contact