# lc-modal

> Modal windows

Latest version **1.0.1** (published 2017-06-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install lc-modal
pnpm add lc-modal
yarn add lc-modal
bun add lc-modal
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-06-09 |
| First published | 2017-06-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | JamesYin |
| Maintainers | elantion |
| Keywords | modal |

## Links

- npm: https://www.npmjs.com/package/lc-modal
- Repository: https://github.com/lazycoffee/lc-modal
- Homepage: https://github.com/lazycoffee/lc-modal#readme
- Issues: https://github.com/lazycoffee/lc-modal/issues
- npm.io page: https://npm.io/package/lc-modal

## 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.0.1 (latest) — 2017-06-09
- 1.0.0 — 2017-06-07

## README

Modal windows

## Usage

### Install
Simply use npm installation.
```bash
npm install lc-modal --save
```

### Import
Suggest using ES6 syntax.
```javascript
//JavaScript
import Modal from '@flyme/modal';
```

```typescript
//TypeScript
import Modal = require('@flyme/modal');
```

## API
You should new a modal instance before showing a modal. You can open a new modal even another modal exist.

```javascript
// all arguments are optional.
let args = {
    backgroundImage: 'string', //modal background image. default: ''
    animationDuration: 'number', //if set it zero, whole modal will not have animation. default: 300
    backdropColor: 'string', // example: #ffffff, rgba(0,0,0,0.1). default: #ffffff
    backgroundPosition: 'string', //default: bottom
    backgroundRepeat: 'string', //default: no-repeat
    baseIndex: 'number', // if your modal is overlaid by another dom, you can set it bigger. default: 200
    sizeRatio: 'number', // modal size ratio
    contentBoxWith: 'number', // modal size is sizeRatio * contentBoxWidth
};
let modal = new Modal(args);
```

### alert
A simple text alert for noticing user something important. If text only one line, the text will align center otherwise it will align left.
```javascript
let modal = new Modal();
modal.alert('This is one line content');
```

### titleAlert
A alert with title.
```javascript
let modal = new Modal();
modal.titleAlert('this is title.', 'This is content. For alert looking more pretty, I suggest this content be two or more line.');
```

### loading
A loading modal for telling user page was loading something.

```javascript
let modal = new Modal();
modal.loadingAlert({
    loadingText: 'Loading image',
});
setTimeout(function() {
  modal.loadingText = 'Uploading image';
}, 1000);
setTimeout(function() {
  modal.close();
  let alertModal = new Modal();
  alertModal.alert('loading success');
}, 3000);
```

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