# ember-semantic-proper-modals

> Ember mixin for proper semantic-ui modals.

Latest version **0.2.1** (published 2018-01-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-semantic-proper-modals
pnpm add ember-semantic-proper-modals
yarn add ember-semantic-proper-modals
bun add ember-semantic-proper-modals
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2018-01-26 |
| First published | 2017-12-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | ^4.5 \|\| 6.* \|\| >= 7.* |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | crushedpixel |
| Maintainers | crushedpixel |
| Keywords | ember, ember-addon, semantic-ui, modals |

## Links

- npm: https://www.npmjs.com/package/ember-semantic-proper-modals
- Repository: https://github.com/CrushedPixel/ember-semantic-proper-modals
- Homepage: https://github.com/CrushedPixel/ember-semantic-proper-modals#readme
- Issues: https://github.com/CrushedPixel/ember-semantic-proper-modals/issues
- npm.io page: https://npm.io/package/ember-semantic-proper-modals

## Dependencies (2)

- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^6.3.0
- [semantic-ui-ember](https://npm.io/package/semantic-ui-ember.md) ^2.0.1

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 0.2.1 (latest) — 2018-01-26
- 0.2.0 — 2017-12-10
- 0.1.2 — 2017-12-10
- 0.1.1 — 2017-12-10
- 0.1.0 — 2017-12-08

## README

# ember-semantic-proper-modals

An ember mixin providing proper support for [Semantic UI](https://github.com/Semantic-Org/Semantic-UI-Ember) modals.

The official `ui-modal` component does not move the modal DOM element outside of the containing component,
thus creating numerous issues with positioning, z-index and usability.  
`ember-semantic-proper-modals` fixes this by providing a mixin that exposes a `showModal` action 
and `onApproveModal` and `onDenyModal` hooks.

The drawback of this library is that you can only have one modal per component. 
This can be worked around by dynamically setting the modal's contents as you require.

## Installation

```
ember install ember-semantic-proper-modals
```

## Usage
In your component's template, define the modal like in vanilla semantic ui:
```hbs
{{!templates/components/modal-component.hbs}}
<button onclick={{action "showModal"}}>Show modal</button>

<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    Example modal
  </div>
  <div class="content">
    Do you really want to perform this action?
  </div>
  <div class="actions">
    <div class="ui secondary deny button">
      Cancel
    </div>
    <div class="ui negative ok button">
      Delete
    </div>
  </div>
</div>
```

Make sure to only include a single element with the `ui modal` class.  
The `showModal` action opens the modal.

In your component, include the `SemanticModalMixin` and override the 
`onApproveModal` and `onDenyModal` functions if needed:

```js
// components/modal-component.js
import Ember from 'ember';
import SemanticModalMixin from 'ember-semantic-proper-modals/mixins/semantic-modal-mixin';

export default Ember.Component.extend(SemanticModalMixin, {
  
  onApproveModal() {
    console.log('ok button pressed');
  },
  
  onDenyModal() {
    console.log('deny button pressed');
  }
  
});
```

## Notes
You can access the jQuery DOM element for the modal using 
`this.get('modal')` and invoke semantic ui behaviours etc. on it.

You can also programatically show the modal by calling `this.showModal()`.

---
_Source: https://npm.io/package/ember-semantic-proper-modals · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
