Creating Beautiful Dialog Boxes With popupWindow Plugin

Yet another JavaScript popup box replacement plugin for creating beautiful, animated alert, prompt and confirm dialog windows on the page.

Features:

• Custom icons.
• Smooth transitions.
• Custom button text.
• Custom size.
• onClose callback.

See also:

• 10 Best Dialog Plugins To Replace The Native JS Popup Boxes

How to use it:

1. Load the stylesheet popupWindow.css in the header, and the JavaScript popupWindow.js after jQuery.

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

2. Create a basic dialog box to alert the user of something.

$.popupWindow({
  type: 'alert',
  title: 'Alert Dialog',
  content: 'I am an alert box',
  onClosed: function(arg){
    // closed
  }
});

3. Create a confirmation dialog to confirm user intentions.

$.popupWindow({
  type: 'confirm',
  title: 'Confirm Dialog',
  content: 'I am a confirm box',
  cancelText: 'Not Sure',
  confirmText: 'Confirm',
  onClosed: function(arg){
    // closed
  }
});

4. Create a prompt dialog to prompt the user for more information.

$.popupWindow({
  type: 'prompt',
  title: 'Prompt Dialog',
  content: 'I am a prompt box',
  onClosed: function(arg1,arg2){
    console.log(arg1); // true or false
    console.log(arg2) // input value
  }
});

5. All default options to customize the popup window plugin.

$.popupWindow({

  "alert", "confirm", or "prompt"
  type: 'alert',

  // "hint", , "error", or "correct"
  icon: 'hint',

  // dialog title
  title: 'Title', 

  // dialog content
  content: 'Dialog Content',

  // dialog width
  width: 540,

  // top offset
  top: 300,

  // cancel button
  cancelText: 'Cancel',

  // confirm button
  confirmText: 'OK',

  // transition speed in ms
  transition: 300,

  // callback
  onClosed: function (arg1, arg2) { }
  
});

---

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