https://github.com/alihan0/mellow-modal

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.
https://github.com/alihan0/mellow-modal

bootstrap bootstrap-modal bootstrap5 mellow mellow-modal modal modal-init

Last synced: 17 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/alihan0/mellow-modal
• Owner: alihan0
• Created: 2023-09-07T07:14:58.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-09-30T10:28:01.000Z (over 2 years ago)
• Last Synced: 2025-01-21T23:14:02.146Z (over 1 year ago)
• Topics: bootstrap, bootstrap-modal, bootstrap5, mellow, mellow-modal, modal, modal-init
• Language: JavaScript
• Homepage:
• Size: 1.23 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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.

```

```

# 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 : "Primary",

  /* ... */

});

```

------------------------------------------

Adds HTML format content to Modal Content.

```

modal.fire({

  /* ... */

  content : '
This is the content of the modal.
',

  /* ... */

});

```

------------------------------------------


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.