vd-modal

v0.0.2

Published

2 years ago

vd-modal is a easy to use modal for angularjs application. one modal at a time.

Downloads

0High
0Medium
0Low

teles

angularjs angular modal angular-component

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/[email protected]/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).

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

VD Modal

Table of contents

1. Install VD modal as a npm package:

2. Insert javascript and css from vd-modal.

3. Inject vd-modal module to your application.

Create your instance of ModalModel as usually: