# kvisaz-dialog

> Simple modal dialog library

Latest version **0.2.2** (published 2020-06-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install kvisaz-dialog
pnpm add kvisaz-dialog
yarn add kvisaz-dialog
bun add kvisaz-dialog
```

## 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.2 |
| Published | 2020-06-14 |
| First published | 2020-05-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 33.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Kvisaz |
| Maintainers | kvisaz |
| Keywords | modal, dialog, modal, window |

## Links

- npm: https://www.npmjs.com/package/kvisaz-dialog
- Repository: https://github.com/Kvisaz/dialog
- Homepage: https://github.com/Kvisaz/dialog#readme
- Issues: https://github.com/Kvisaz/dialog/issues
- npm.io page: https://npm.io/package/kvisaz-dialog

## 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.2 (latest) — 2020-06-14
- 0.2.1 — 2020-06-14
- 0.2.0 — 2020-05-18
- 0.1.3 — 2020-05-16
- 0.1.2 — 2020-05-16
- 0.1.1 — 2020-05-16
- 0.1.0 — 2020-05-15
- 0.0.9 — 2020-05-15
- 0.0.8 — 2020-05-15

## README

# Simple modal dialog library

Библиотека для создания диалоговых окон с одной функцией. 

Фичи:
- открывает окно в центре экрана поверх всего
- под окном - тень, которая не дает реагировать на нижележащие объекты
- кастомный дизайн (тупо описать классы CSS - и подключать их позже)
- в окне может быть куча кнопок


## Modal Dialog Window
```javascript
Kvisaz.dialog({ 
    addClass: 'myDialogClass', // кастомный класс, будет добавлен к имеющимся у окна
    title: 'Выберите действие',  // заголовок окна [необязательно]
    text: 'Оно может быть опасным', // текст [необязательно]
    buttons: [
        {
            text: 'Удалить',       //    
            callback: ()=> { console.log('Уверен')}, // функция j
            warning: 'Вы уверены?', // если задано - открывает дополнительный диалог, в котором можно отменить нажатие
        },
        {
            text: 'Отменить',       //    
            callback: ()=> { console.log('Не уверен')}, // функция 
        }  
    ]    
  });
```

## custom modal Window

```javascript
Kvisaz.window({ 
    addClass: 'myDialogClass', // custom window class
    html: '<h1>Hello</h1><button>Press Me</button>',  // custom win html
    onClick: e => { // custom click listener for window
            const wrapper = e.target.closest(Kvisaz.getWrapperSelector());
            Kvisaz.close(wrapper);
        }
  });

const windowWrapSelector = Kvisaz.getWrapperSelector();

// Kvisaz.close(wrapper); // close window with shadow


```

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