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

or

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 | |

License

ISC © Selim Hamzaoğulları