# mellow-modal

> Hello everyone, Mellow Modal is a modal creation tool. On advanced systems, it makes more sense in terms of performance to recreate the bootstrap modals in the DOM instead of constantly adding them to the page. But it takes a lot of code to create a moda

Latest version **1.0.4** (published 2023-09-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install mellow-modal
pnpm add mellow-modal
yarn add mellow-modal
bun add mellow-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.0.4 |
| Published | 2023-09-30 |
| First published | 2023-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alihan Öztürk |
| Maintainers | alihanozturk |
| Keywords | mellow, modal, mellow-modal, bootstrap, bootstrap-modal, modal-fire, modal-init, create-modal |

## Links

- npm: https://www.npmjs.com/package/mellow-modal
- npm.io page: https://npm.io/package/mellow-modal

## Dependencies (1)

- [bootstrap](https://npm.io/package/bootstrap.md) ^5.3.1

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2023-09-30
- 1.0.1 — 2023-09-07
- 1.0.0 — 2023-09-07

## README

# Mellow Modal

Hello everyone,
Mellow Modal is a modal creation tool. On advanced systems, it makes more sense in terms of performance to recreate the bootstrap modals in the DOM instead of constantly adding them to the page. But it takes a lot of code to create a modal every time, and it's really cumbersome.

If you are using bootstrap modals in your project, the fastest and easiest way to create a modal is with Mellow Modal.

# Install

Mellow Modal is very simple to install. You can easily install it with the help of NPM:
```
npm i mellow-modal
npm install
```
or you can add the library directly to your project.
```
<script src="/path/your/folder/mellow-modal.js"></script>
```

# Usage

Mellow Modal is very easy to start. You can init with a single command
```
const modal = new MellowModal;
modal.fire();
```
this way, you can start a quick modal. By default a modal will be initialized.

You can add certain parameters in `JSON` format to design your modals.

# Parameters

| Parameter  | Type | Default | Detail |
| ------------- | ------------- | ------------- | ------------- |
| `id`  | STRING  | `mellowModal` | Lets you specify an `id` for the modal. |
| `size`  | STRING  | `modal-md`  | Allows you to change the dimensions of the modal. `modal-sm`, `modal-md` or `modal-lg`. |
| `backdrop` | BOLEAN | `false` | prevents the modal from closing when clicking outside the modal or pressing the `ESC` key. |
| `showCloseButton` | BOLEAN | `true` | In the upper right corner of the modal, it shows the close modal button. |
| `title` | STRING | `null` | Adds a title for the modal. |
| `header` | BOLEAN | `true` | Shows or hides the Modal Header. Default is `true` |
| `footer` | BOLEAN | `true` | Shows or hides the Modal Footer. Default is `true` |
| `showConfirmButton` | BOLEAN | `true` | Adds confirmation button to Modal Footer. Default is `true` |
| `confirmButtonType` | STRING | `success` | Sets the style of the confirmation button. Check Bootstrap Colors for other styles. |
| `confirmButtonText` | STRING | `Confirm` | Sets the text of the confirmation button. |
| `buttons` | STRING | `null` | Adds different buttons to Modal Footer. |
| `content` | STRING | `null` | Adds HTML format content to Modal Content. |
| `animation` | STRING | `fade` | Lets you define a custom class for the modal's opening animation. |
| `allowFullscreen` | BOLEAN | `false` | Starts the modal in full screen. Disables the `size` parameter. |
| `css` | STRING | `null` | lets you add custom css for the overall modal. |


# Parameter Examples


Lets you specify an `id` for the modal.
```
modal.fire({
  /* ... */
  id : "exampleModal",
  /* ... */
});
```
------------------------------------------

Allows you to change the dimensions of the modal. `modal-sm`, `modal-md` or `modal-lg`. Default is `modal-md`

```
modal.fire({
  /* ... */
  size : "modal-lg",
  /* ... */
});
```
------------------------------------------

prevents the modal from closing when clicking outside the modal or pressing the `ESC` key. Default is `false`

```
modal.fire({
  /* ... */
  backdrop : true,
  /* ... */
});
```
------------------------------------------

In the upper right corner of the modal, it shows the close modal button. Default is `true`

```
modal.fire({
  /* ... */
  showCloseButton : true,
  /* ... */
});
```
------------------------------------------

Adds a title for the modal.

```
modal.fire({
  /* ... */
  title : "Example Modal Title",
  /* ... */
});
```
------------------------------------------

Shows or hides the Modal Header. Default is `true`

```
modal.fire({
  /* ... */
  header : true,
  /* ... */
});
```
------------------------------------------

Shows or hides the Modal Footer. Default is `true`

```
modal.fire({
  /* ... */
  footer : true,
  /* ... */
});
```
------------------------------------------

Adds confirmation button to Modal Footer. Default is `true`

```
modal.fire({
  /* ... */
  showConfirmButton : true,
  /* ... */
});
```
------------------------------------------

Sets the style of the confirmation button. Check Bootstrap Colors for other styles. Default `success`

```
modal.fire({
  /* ... */
  confirmButtonType : "primary",
  /* ... */
});
```
------------------------------------------

Sets the text of the confirmation button. Default `Confirm`

```
modal.fire({
  /* ... */
  confirmButtonText : "Save",
  /* ... */
});
```
------------------------------------------

Adds different buttons to Modal Footer.

```
modal.fire({
  /* ... */
  buttons : "<button type="button" class="btn btn-primary">Primary</button>",
  /* ... */
});
```
------------------------------------------

Adds HTML format content to Modal Content.

```
modal.fire({
  /* ... */
  content : '<p>This is the content of the modal.</p>',
  /* ... */
});
```
------------------------------------------

Lets you define a custom class for the modal's opening animation. Default `Fade`

```
modal.fire({
  /* ... */
  animation : 'custom-animation-class',
  /* ... */
});
```
------------------------------------------

Starts the modal in full screen. Disables the `size` parameter. Default `false`

```
modal.fire({
  /* ... */
  allowFullscreen : true,
  /* ... */
});
```
------------------------------------------

lets you add custom css for the overall modal.

```
modal.fire({
  /* ... */
  css : 'background:red',
  /* ... */
});
```

# Licence

The Laravel framework is open-sourced software licensed under the MIT license.

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