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
Links:
- https://github.com/auth0/angular-storage
- https://github.com/dwmkerr/angular-modal-service
- https://github.com/zurb/foundation-apps