Vulture-modal NPM

Vulture-modal

Vulture-modal is a minimalist and easy-to-use modal plugin written in pure JavaScript.

Demo

It is still under development.

Features

Custom class name
Customizable (write your custom html in content)

Installation

Run the below command to add Vulture-modal to your exisitng or new project.

npm i vulture-modal

yarn add vulture-modal

Import Vulture-modal into your module to start using it.

import VultureModal from 'Vulture'

Adding Vulture-modal to HTML page using the traditional method

And the script at the bottom of the page

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vulture-modal.js"></script>

Documentation

VultureModal.init({
  id: 'vulture-id',
  position: 'center',
  width: '250px',
  headerText: '🎉 Vulture Modal',
  contentText: '🦅 Vulture Content',
  className: false,
  html: null,
  footer: true,
  confirmButtonText: 'Confirm',
  cancelButtonText: 'Cancel',
  onShow: id => console.info(`${id} modal opened!`),
  onClose: id => console.info(`${id} modal closed!`)
})

Different ids should be used for each modal. After the modal is init you can show and close it as follows.

VultureModal.show('vulture-id') // Show modal
VultureModal.close('vulture-id') // Close modal

You should write the id of the modal you are initing inside the show and close functions.
API

Option Key	type	Usage	Defaults
id	string	The id of the modal to be created	"vulture-id"
position	"center", "left", "right"	To show the modal on center or left or right	"center"
width	"px", "%", "rem", "em"	The modal width	"250px"
headerText	string	Text to be displayed on the modal	"🎉 Vulture Modal"
contentText	string	Text to be displayed in the content	"🦅 Vulture Content"
className	string	Ability to provide custom class name for further customization
html	HTML	You can write HTML code (used instead of contentText)
footer	boolean	To show the confirm and cancel button under the modal	true
confirmButtonText	string	Change your confirm button text (Only if footer is true)	"Confirm"
cancelButtonText	string	Change your cancel button text (Only if footer is true)	"Cancel"
onShow	Function	Invoked when the modal is opened
onClose	Function	Invoked when the modal is closed