Customizable Dialog Popup Plugin For jQuery - popup.js

popup.js is a lightweight yet highly configurable jQuery popup plugin that helps you create various forms of modal dialog boxes such as alerts, confirm dialog, contact form, etc. 

How to use it:

1. Load the jQuery popup.js plugin's CSS file in the head section of the document that will provide the basic styles and CSS3 animations for the dialog popups.

<link rel="stylesheet" href="css/popup.css">

2. Load jQuery library and the jQuery popup.js plugin's JavaScript file at the end of the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/popup.js"></script>

3. Create a basic alert dialog box on your webpage.

var config = {
    title: "Alert",
    message: "Alert",
    buttons: ['OK']
};

var myPopup = new Popup(config);

4. All configuration options.

var config = {

    // dialog title
    title: "Alert",

    // dialog content
    message: "Alert",

    // custom buttons
    buttons: ['OK'],

    // The web address where the button forms will be submitted to
    // required if button action is provided
    url: '',

    // The method you want to use to submit the button forms
    // 'get' or 'post'
    method: 'get',

    // A class name that is attached to the overlay of the popup.
    class: '',

    // Refreshes page when the popup is closed
    reload: false,

    // Each button is wrapped in a form. 
    // If you want to add values to the buttons this is where you do it. 
    // The values will be in the form of hidden inputs with names and values. 
    // The the inner array at index0 will be applied to the button at index[0] of the buttons array. 
    // The inner array at index[1] will be applied to the button at index[1] of the buttons array, and so on. 
    // The inner arrays should contain objects with a name, and a value. 
    // If you put more than one object per array, then the corresponding button will have multiple hidden inputs. 
    // Clicking a button will close the popup regardless of what else it does. 
    // In the above example each button will have a single hidden input hidden to it. 
    // If this option is set, the number of inner arrays needs to match the number of buttons.
    buttonActn: {}

};

5. Public methods.

// open the dialog
myPopup.open();

// close the dialog
myPopup.close();

Change log:

2016-01-12

• update

---

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