generic-modal

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

1. 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

1. 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>

1. 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