Vd-modal NPM | npm.io

VD Modal

VD Modal is a easy to use modal for angularjs application. one modal at a time.

vd modal easy to use angularjs modal one modal at a time

This is another modal component using angularJs framework. This modal wants to be simple and easy to use.

VD Modal opens one modal at a time, never shows two modals at same time.
All your modal content is only attached to your document after modal popups, it means your modal will not be hidden using css display: none or angular ng-show features. And this can be good to your SEO.
VD Modal was made with love by Viva Decora front end team.

1. Install VD modal as a npm package:

$ npm install --save vd-modal

Or use it from unpackage cdn, from this url:

https://unpkg.com/vd-modal@0.0.1/dist/js/vd-modal.min.js

2. Insert javascript and css from vd-modal.

<script src="/path/to/vd-modal/dist/js/vd-modal.min.js" type="application/javascript"></script>
<link rel="stylesheet" href="/path/to/vd-modal/dist/css/vd-modal.css">

3. Inject vd-modal module to your application.

(function(){
    "use strict"
	
	angular.module("my-application", ["vd-modal"]);
})();

Create your modal by using ModalModel factory. ModalModal provides a function called getContructor(nameOfYourModal) that you can use to create new instances of your modals, like that:

(function(){
   "use strict"
       
	angular.module("my-application").controller("mainController", function(ModalModel){
		var vc = this;
		vc.helloWorlModal = new ModalModel.getConstructor("hello-world");
		vc.openHelloWorlModal = function(){
			vc.helloWorlModal.isOpen = true;
		}
	});
})();

After you do id, create your own <modal> in html wrapping any content you need:

<body ng-app="my-application">
	<modal model="vc.helloWorlModal">
		<h1>Hello world!</h1>
		<p> This is my first modal using VD modal </p>
	</modal>
	<main ng-controller="mainController">
		<button ng-click="vc.openHelloWorlModal()"></button>
	</main>
</body>

Column modal is another directive you are able to use to create a two columns modal. Modals with columns have basically

A column for main content;
A column for sidebar content;
A toggle button inside content column to expand/collapse sidebar;

Create your instance of ModalModel as usually:

angular.module("my-application").controller("MainController", MainController);

function MainController(ModalModel){

    var vc = this;
    vc.sidebarModel = new ModalModel.getConstructor("sidebar-model");
    vc.sidebarModel.isFullscreen = true;

    vc.openSidebarModel = function(){
        vc.sidebarModel.isOpen = true;
    }
}

and in your HTML you should do:

<modal model="vc.sidebarModel">
    <div class="vd-modal__grid">
        <modal-column layout="content" modal-instance="sidebar-model">Content of my modal</modal-column>
        <modal-column layout="sidebar" modal-instance="sidebar-model">Sidebar of my modal</modal-column>
    </div>
<modal>

<button ng-click="vc.openSidebarModal()">Open sidebar modal</button>

VD modal is licensed under MIT. https://github.com/vivadecora/vd-modal/blob/master/LICENSE(see more).

angularjs angular modal angular-component

@everything-registry/sub-chunk-3045 @infinitebrahmanuniverse/nolb-vd

0.0.2

7 years ago

0.0.1