ng-morphing-modal
ng-morphing-modal copied to clipboard
Angular Morphing Modal
Angular Morphing Modal
Angular directive for fullscreen modal window with wonderful animation in trending Material Design style. Responsive and mobile-ready. Works in modern browsers.
How it works
Installation
Install with Bower
npm update -g bower
bower install ng-morphing-modal --save
Include Scripts
<script src="bower_components/velocity/velocity.min.js"></script>
<script src="bower_components/ng-morphing-modal/build/js/ngMorphingModal.min.js"></script>
Declare Angular Dependency
angular.module('your-app', ['ng-morphing-modal']);
Manual installation
Download contents of build/ folder from this repo, include .js files in your project. Velocity.js and Angular is required!
Usage
Define launcher:
<a href="#" class="btn" **ng-morphing-modal** content-selector="**cbc**" data-type="modal-trigger">
Fire Modal
</a>
And modal content markup:
<div class="cd-modal" id="**cbc**">
<div class="cd-modal-content">
<!-- your modal content -->
</div>
</div>
Change list:
- ~~Bower package~~
- ~~Initial release~~
- Support for multiple DOM instances
- Add build script
- Refactoring sass for easy styling
- Content from JSON/XHR
- Extended mobile support
Please show your interest to this project with a stars, it can speed up development process!
Support and credits
Based on idea from this Pen Created and maintained for you by TrackDuck - visual feedback and bug tracking with screenshots for web integrated with more than 15 project management systems.
If you have any questions/comments/recommendations drop us a line to: [email protected]