generic-modal
v0.1.5
Published
A flexible, generic modal service
Downloads
9
Maintainers
Readme
Generic Angular Bootstrap Modal
This is a package that extends the UI Bootstrap modal. It configures the modal in a stylistically consistent way, while aiming to allow a high degree of flexibility.
Install
- Install the package and its dependencies via npm:
# install dependencies
$ npm i angular angular-ui-bootstrap bootstrap --save
# install the package
$ npm i generic-modal --save
- Iinclude the references in the HTML:
<!-- Styling -->
<link
href="./node_modules/generic-modal/dist/generic-modal.min.css"
rel="stylesheet"
type="text/css">
<!-- Scripts -->
<script src="./node_modules/generic-modal/dist/generic-modal.min.js"></script>
- Inject the dependency in your Angular module and controller
// Inject the ngGenericModule into your app's module
var app = angular.module('myApp', ['ngGenericModal'])
// Then, inject the genericModule factory into each controller that uses the modal
app.controller('MainController', ['genericModal', function(genericModal) {
genericModal.open("Hi", "You opened the modal");
}]);
Build from source
To build the package from source (for e.g. development), follow the following commands:
$ git clone https://github.com/one-acre-fund/generic-modal.git
$ cd generic-modal
$ npm i
$ npm i -g gulp # if you haven't installed gulp yet
$ gulp
The gulp
command compiles the source files in src
and pipes them to the dist
directory. You shouldn't edit the files in dist
directly, as they'll be overwritten when gulp
is run.
Try the demo
$ cd generic-modal
$ open index.html