The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Ng Morphing Modal

    Angular Morphing Modal
    Filed under 

    • 🔾7%Overall
    • 124
    • 96 days
    • 🕩15
    • 👥3

    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.

    Check Demo

    How it works

    Angular Morphing Modal


    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!


    Define launcher:

    <a href="#" class="btn" **ng-morphing-modal** content-selector="**cbc**" data-type="modal-trigger">
    Fire Modal

    And modal content markup:

    <div class="cd-modal" id="**cbc**">
        <div class="cd-modal-content">
        <!-- your modal content -->

    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:

    Show All