Creating Beautiful Dialog Boxes With popupWindow Plugin

File Size: 11.8 KB
Views Total: 3027
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


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

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

3. Create a confirmation dialog to confirm user intentions.

  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.

  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.


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