https://github.com/vivadecora/vd-modal
Modal simples usando angularjs e flexbox.
https://github.com/vivadecora/vd-modal
angular angular-components angular-directives angular1 angularjs angularjs-component angularjs-directives javascript modal
Last synced: 3 months ago
JSON representation
Modal simples usando angularjs e flexbox.
- Host: GitHub
- URL: https://github.com/vivadecora/vd-modal
- Owner: vivadecora
- License: mit
- Created: 2017-02-22T23:16:58.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-10T14:57:44.000Z (about 8 years ago)
- Last Synced: 2024-10-30T06:40:29.793Z (6 months ago)
- Topics: angular, angular-components, angular-directives, angular1, angularjs, angularjs-component, angularjs-directives, javascript, modal
- Language: JavaScript
- Homepage: https://vivadecora.github.io/vd-modal/
- Size: 56.6 KB
- Stars: 4
- Watchers: 16
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VD Modal
> 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: 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.
## Table of contents
* [Installation](#installation)
* [Basic Usage](#basic-usage)
* [Column modal](#column-modal)
* [License](#license)
Installation
### 1. Install VD modal as a npm package:
```shell
$ 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.
```html
```
### 3. Inject vd-modal module to your application.
```javascript
(function(){
"use strict"
angular.module("my-application", ["vd-modal"]);
})();
```
Basic Usage
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:
```javascript
(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 `` in html wrapping any content you need:
```html
Hello world!
This is my first modal using VD modal
```
Column modal
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:
```javascript
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:
```html
Content of my modal
Sidebar of my modal
Open sidebar modal
```
License
VD modal is licensed under MIT. [https://github.com/vivadecora/vd-modal/blob/master/LICENSE](see more).