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.