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 |

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.