# @flk/modal
> Modal popup for Falak framework
Latest version **1.3.8** (published 2020-05-01) · ISC license · 0 weekly downloads
## Install
```sh
npm install @flk/modal
pnpm add @flk/modal
yarn add @flk/modal
bun add @flk/modal
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.3.8 |
| Published | 2020-05-01 |
| First published | 2019-09-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 13.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hasan Zohdy |
| Maintainers | hassanzohdy |
| Keywords | modal, popup, flk |
## Links
- npm: https://www.npmjs.com/package/@flk/modal
- Repository: https://github.com/falakjs/modal
- Homepage: https://github.com/falakjs/modal#readme
- Issues: https://github.com/falakjs/modal/issues
- npm.io page: https://npm.io/package/@flk/modal
## Dependencies (2)
- [@flk/scss](https://npm.io/package/@flk/scss.md) ^1.3.*
- [@flk/animator](https://npm.io/package/@flk/animator.md) ^1.3.*
## 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
- 1.3.8 (latest) — 2020-05-01
- 1.3.7 — 2020-03-06
- 1.3.6 — 2020-02-29
- 1.3.5 — 2020-02-29
- 1.3.4 — 2020-02-01
- 1.3.3 — 2020-01-27
- 1.3.2 — 2020-01-17
- 1.3.1 — 2020-01-16
- 1.3.0 — 2019-12-31
- 1.1.13 — 2019-09-17
- 1.1.12 — 2019-09-17
## README
# Modal
A simple lightweight modal implementation for `FalakJS`.
# Installation
`flk install flk-modal`
# Table of contents
- [Modal](#modal)
- [Installation](#installation)
- [Table of contents](#table-of-contents)
- [Usage](#usage)
- [Using the close event](#using-the-close-event)
- [Available attributes](#available-attributes)
- [Configurations](#configurations)
# Usage
In any component you want to use the modal, just include it with an `if statement`.
`home-page.component.html`
```html
Home sweet home
```
## Using the close event
As the `*if` statement is used to initialize the modal component, we need to tell the component when it closes to change our `if` criteria so the modal no longer be opened.
`close` event handles this case.
`home-page.component.html`
```html
Home sweet home
```
So when the modal is closed, it changes our opening condition to be `null` thus the modal no longer is opened until the condition `showProfile` is set to `true` again.
The `header` attribute is used to set the modal header text, it could be used as a `static` attribute `header="header text"` or a dynamic attribute `[header]="this.profileHeader"`.
# Available attributes
Here is the full list of attributes
| Attribute | Type | Default value | Description |
| ------------------ | -------------------------------------------------------------------- | --------------- | -------------------------------------------------------------------------------------- |
| **header** | [option](https://github.com/falakjs/Falak/wiki/Component-UI#options) | `N/a` | Modal header text. |
| **id** | [option](https://github.com/falakjs/Falak/wiki/Component-UI#options) | `Random string` | Modal id for more control. |
| **class** | [option](https://github.com/falakjs/Falak/wiki/Component-UI#options) | `Random string` | The class is passed to the `modal content` wrapper. |
| **close-keyboard** | [prop](https://github.com/falakjs/Falak/wiki/Component-UI#props) | `true` | If set to true, the modal will be closed when the user presses `esc` key. |
| **close-btn** | [prop](https://github.com/falakjs/Falak/wiki/Component-UI#props) | `true` | If set to true, the modal will be closed when the user clicks on the top `close` icon. |
| **close-backdrop** | [prop](https://github.com/falakjs/Falak/wiki/Component-UI#props) | `true` | If set to true, the modal will be closed when the user presses on the dimmed overlay. |
| **theme** | [prop](https://github.com/falakjs/Falak/wiki/Component-UI#props) | `default` | Default theme is white modal, available options `default`, `dark`, `dark-transparent`. |
# Configurations
The following list could be set as default value in the `config.js` file
**Main Configuration key**: `modal`
| key | Type | Default value | Description |
| -------- | --------- | ------------- | ------------------------------------------------------------------ |
| keyboard | `Boolean` | **true** | Close the modal when user presses the `esc` key. |
| closeBtn | `boolean` | **true** | Close the modal when user click on the `close` icon. |
| backdrop | `boolean` | **true** | Close the modal when the user presses on the dimmed overlay. icon. |
| theme | `string` | **default** | Modal theme, available options `default`, `dark`, `dark-transparent`. |
---
_Source: https://npm.io/package/@flk/modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._