AngularJS Animated Modal

Template

Define a template with any framework, just ensure that it is identified by an ID

<script type="text/ng-template" id="sample-modal">
  <h1 class="text-center">{{data.title}}</h1>
  <hr>
  <div class="row text-center">
    <div class="col-md-6">
      <h2>Sub-Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="col-md-6">
      <h2>Sub-Heading</h2>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  <hr>
  <div class="text-right">
    <a class="btn btn-danger btn-lg" ng-click="close()">Close</a>
  </div>
</script>
        

Usage

Initialize the app with the angular.animated.modal module and inject into controller with $animatedModal parameter.

Choose between 'Dark' and 'Light' themes, provide the templateUrl, the coordinates from where the modal should start from, and the data for the modal template.

var app = angular.module('myApp',['angular.animated.modal']);
app.controller('AppCtrl',function($animatedModal,$scope){
  $scope.showModal = function($event,template,data){
    var modalOptions = {
      templateUrl: template,
      coords:[$event.x,$event.y], //Pass coordinates of the trigger
      theme:'dark',
      data: data
    }
    $animatedModal.open(modalOptions);
  }
});
        

Trigger

<div class="jumbotron" style="cursor:pointer"  ng-click="showModal($event,'sample-modal',{title:'Heading'})"><h2 class="text-center">Click Anywhere on Me!</h2></div>