Skip to content

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.

Notifications You must be signed in to change notification settings

alihan0/mellow-modal

Repository files navigation

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.

About

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.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published