Small Confirm/Prompt Box Plugin With jQuery - jq-prompt.js

File Size: 8.96 KB
Views Total: 1342
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Small Confirm/Prompt Box Plugin With jQuery - jq-prompt.js

The jq-prompt.js jQuery plugin lets you create a minimal clean popup box which can be used for prompting the user for information or confirming something on the client side.

How to use it:

1. Load the core stylesheet jq-prompt.min.css in the header section.

<link rel="stylesheet" href="jq-prompt.min.css">

2. Load jQuery JavaScript library and the minified version of the jq-prompt.js plugin at the end of the page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jq-prompt.min.js"></script>

3. Create a prompt popup using the xPrompt method.

$.xPrompt({
  // optional settings here
}, function(i){
  // do something with data
  console.log(i)
})

4. Create a confirmation popup using the xPromptQ method.

$.xPromptQ({
  // optional settings here
}, function(i){
  // do something with data
  console.log(i)
})

5. Default options for the prompt popup.

// popup title
header: 'prompt',

// input type
type: 'text',

// animation speed
speed: 'fast',

// placeholder text
placeholder: 'cannot be empty',

// button text
cBtn: 'Cancel',
sBtn: 'Submit',

// error message
error: 'cannot be empty'

6. Default options for the prompt popup.

// popup title
header: 'prompt',

// animation speed
speed: 'fast',

// button text
cBtn: 'Cancel',
sBtn: 'Submit',

7. You can also set the parameters globally.

// set global prompt string defaults
$.xPrompt.defaults = {
  placeholder: "test",
  error: "error"
};

// set global prompt boolean defaults
$.xPromptQ.defaults = {
  speed: 'slow'
};

This awesome jQuery plugin is developed by angeal185. For more Advanced Usages, please check the demo page or visit the official website.