Simple Custom Dialog Popup Plugin With jQuery

File Size: 38.1 KB
Views Total: 16306
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Custom Dialog Popup Plugin With jQuery

A simple jQuery plugin for creating draggable dialog windows to replace the default Javascript popup boxes (alert, confirm and prompt boxes).

How to use it:

1. Load the required stylesheet in the head section of your web page.

<link rel="Stylesheet" href="css/jquery.dialog.css">

2. Load jQuery JavaScript library and the jquery.dialog.js script at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.dialog.js"></script>

3. Create an alert window.

alertX = $.dialog.alert;
$('button').bind('click', function () {
  alertX("Alert", "I'm an alert window", function () {
    $.dialog.alert("Alert", "Closed");
  });
});

4. Create a confirm window.

confirmX = $.dialog.confirm;
$('button').bind('click', function () {
  confirmX("Confirm", "Action Comfirm", function () {
    $.dialog.alert("Confirm", "Confirmed");
  });
});

5. Create a prompt window.

windowX = $.dialog.window;
$('button').bind('click', function () {
  windowX("Title", "demo.htm", "0", function () {
    $.dialog.alert("Prompt Window", "Saved");
  });
});

6. Available options.

url: '',
height: 'auto',
width: 'auto',
top: '100px',
left: '100px',
iconCls: 'add',
mainFrame: '',
subForm: '',

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