Skip to content

Instantly share code, notes, and snippets.

@landed1
Last active December 4, 2015 00:37
Show Gist options
  • Save landed1/9361d68a90e87a2b92cf to your computer and use it in GitHub Desktop.
Save landed1/9361d68a90e87a2b92cf to your computer and use it in GitHub Desktop.
Angular Modal directive using Refils
Using this modal found here - http://refills.bourbon.io/components/ copy the css as is and note the source of the custom modal directive will be the html plus some amends shown below.
add the modal (modal-dialog tag) to your Angular template file and add a couple of native directives to the body tag
ex
<body ng-app="baApp" ng-controller="MainCtrl" data-ng-init="init()" ng-class="{open: modalFlag, closed: !modalFlag}">
<modal-dialog></modal-dialog>
(create a new template file 'modal.html') add code to modal.html
<div class="modal">
<label for="modal-1">
<div class="modal-trigger">Click for Modal</div>
</label>
<input class="modal-state" id="modal-1" ng-model="checkboxModalModel" ng-click="modalChange($event)" type="checkbox"/>
<div class="modal-fade-screen" ng-click="closeModal($event)">
<div class="modal-inner">
<div class="modal-close" for="modal-1" ng-click="closeModal($event)"></div>
<h1>Modal Title</h1>
<p class="modal-intro">Intro text lorem ipsum dolor sit ametm, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi minima.</p>
<p class="modal-content">Body text lorem ipsum dolor ipsum dolor sit sit possimus amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias eriam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam. Body text lorem ipsum dolor ipsum dolor sit sit possimus amet.</p>
</div>
</div>
</div>
you will now need to define the custom directive thus..
baApp.directive('modalDialog', function() {
return {
restrict: 'E',
scope: true,
replace: true, // Replace with the template below
transclude: true, // we want to insert custom content inside the directive
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width){
scope.dialogStyle.width = attrs.width;
}
if (attrs.height){
scope.dialogStyle.height = attrs.height;
}
scope.closeModal = function(context){
context.stopPropagation();
scope.checkboxModalModel = !scope.checkboxModalModel;
}
scope.modalChange = function(context){
scope.$parent.$parent.modalFlag = scope.checkboxModalModel;
};
},
templateUrl:'/views/modal.html'
};
});
@landed1
Copy link
Author

landed1 commented May 27, 2015

You will also need to specify modalFlag somewhere suitable I chose my main controller - because the body tag can then bind easily to it..there may be a more correct way to set it in the scope of the modal directive but then binding to that boolean I found less easy to know how to do..

$scope.modalFlag = false; //true - modal is open so need to set 'open' on body tag to keep in with the refils css and method.

@landed1
Copy link
Author

landed1 commented Jun 4, 2015

I am no longer depending on the body tag css hook (the modal box relies on the input checked state)
It's a lot cleaner and I will update this or link to the github in due course. Just message me if you need some clarification or comment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment