VD Modal is a easy to use modal for angularjs application. 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: noneor angularng-showfeatures. And this can be good to your SEO. - VD Modal was made with love by Viva Decora front end team.
$ npm install --save vd-modalOr use it from unpackage cdn, from this url:
<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">(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;
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).