bootstrap-modal

bootstrap-modal

Bootstrap Modal (w/ animation) addon for Ember CLI

Usage

Installation

ember install bootstrap-modal

Using

Usually you will want to create custom components based on this component, since every ones needs are different. The following is a simple example of what you can do.

{{#if showModal}}
  {{#with (action 'toggleShowModal') as |toggle|}}
    {{#bootstrap-modal close=(action toggle) closeOnOverlayClick=true}}
      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" {{action toggle}}>
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Test</h4>
      </div>

      <div class="modal-body">
        Content Here
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-primary" {{action toggle}}>
          Close
        </button>
      </div>
    {{/bootstrap-modal}}
  {{/with}
{{/if}}

The toggleShowModal is an action that toggles the showModal boolean.

If you have your own app/transitions.js, then you will need to add the modal transition like the example below, otherwise, the transition should just work.

// app/transitions.js

import defaultTransition from 'bootstrap-modal/utils/default-transition';

export default function () {
  // bootstrap-modal transition
  defaultTransition(this);

  // other transitions here..
}

Developing

Follow the steps below to start the dummy app, and work on contributing to this addon.

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:testall to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.