Nice Alert, Prompt And Confirmation Dialog Plugin - Dialog.js

Just another jQuery based native JS popup enhancement plugin that lets you create responsive, flexible alert, prompt and confirmation dialog boxes on the web application.

More features:

• Custom action buttons.
• Required field validation for prompt dialog box.
• 'Fixed' or 'Absolute' position options.
• 'Scale', 'Fade' or 'Slide' animations powered by CSS3.
• Callback functions.

Installation:

$ npm install jquery.dialog.js

How to use it:

1. Add references to jQuery library and the jQuery dialog.js plugin's files into your webpage.

<link rel="stylesheet" href="jquery.dialog.min.css">
<script src="jquery.min.js"></script>
<script src="jquery.dialog.min.js"></script>

2. Create an alert dialog using dialog.alert method:

dialog.alert({
  title: "Alert Title",
  message: "Alert Message"
});

3. Create a prompt dialog using dialog.prompt method:

dialog.prompt({
  title: "Prompt Title",
  message: "Prompt Message",
  button: "Submit",
  required: true,
  input: {
    type: "password",
    placeholder: "This is a placeholder..."
  },
  validate: function(value){
    if( $.trim(value) === "" ){
      return false;
    }
  }
});

4. Create a confirmation dialog using dialog.confirm method:

dialog.confirm({
  title: "Confirm Title",
  message: "Confirm Message",
  cancel: "Cancel",
  button: "Accept",
  required: true,
  callback: function(value){
    console.log(value);
  }
});

5. All default configuration options:

{

  // dialog title
  title: "",

  // dialog message
  message: "",

  // confirm button
  button: "Ok",

  // cancel button
  cancel: "Cancel",

  // is required 
  required: false,

  // or 'absolute'
  position: "fixed",

  // 'Scale', 'Fade' or 'Slide'
  animation: "scale",

  // for prompt dialog
  input: {
    type: "text"
  },

  // validate the submitted value
  validate: function(value){},

  // executed when the user closes/submits the dialog box
  callback: function(value){} 
  
}

Change log:

2017-06-26

• Added html classes

2017-06-24

• Fixed jQuery var

2017-06-22

• Fixed jQuery variable

2017-05-06

• fixed jQuery var

---

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