JavaScripting

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


  • ×

    Ng Morphing Modal

    Angular Morphing Modal
    Filed under 

    • 🔾8%Overall
    • 128
    • 69.6 days
    • 🕩16
    • 👥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

    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.

    TrackDuck

    If you have any questions/comments/recommendations drop us a line to: anton@trackduck.com

    Show All