ClassyPopup
Socialize with the power of jQuery!

ClassyPopup is a jQuery plugin written by Marius Stanciu - Sergiu, a quick, simple, and easy plugin to use for all of your popup needs. It is highly customizable, and very intuitive to use.

Download it

First you need to include the jQuery library, since ClassyPopup is a plugin. You can download it from the jQuery website or link it directly from the Google CDN. Also, if you want draggable windows, you'll need jQuery UI.

Secondly, you need to include the jQuery ClassyPopup javascript and the css file into your page. You can do it by adding the code below to your page.

Last, you trigger the ClassyPopup() function on the element you just created. In this case, we trigger the function on the element with the id alert.

ClassyPopup.alert({
    title: 'Info',
    text: 'Hello there from Class.PM'
});

• Parameters

  ---

• override - if set to true, calling alert(text) will fire ClassyPopup with your text inside, can be true or false
• background - used to specify the background shade, can be white, black, or none
• centerOnResize - used to specify whether the popup should stay centered on window resize, can be true or false
• fade - used to specify whether the popup should fade in or appear instantly, can be true or false
• text - the message displayed in the content pane
• width - specify the ClassyPopup's width, should be a CSS String, e.g. "300px", "55%", etc
• title - specify the ClassyPopup's title.
• leftButtons - add buttons on the left side of the popup
• rightButtons - add buttons on the right side of the popup

• Callbacks

  ---

• onOpen - callback function for when the popup has fully opened. Perfect for loading data via ajax to the content pane (.pcontent)
• onClick - callback function for when a button is clicked. If a button was titled "Enter", the parameter of this function will be "Enter". Used with switch/if else statements, one can add any functionality they want to each button

ClassyPopup.alert({
    width: '400px',
    title: 'Button Callbacks',
    rightButtons: ['No', 'Yes'],
    leftButtons: ['Close'],
    onOpen: function() {
        $('').html("rightButtons: ['No', 'Yes'],
leftButtons: ['Close']
").appendTo('.pcontent');
    },
    onClick: function(button) {
        if (button != 'Close') {
            $('.ClassyPopup .pcontent').append('
Clicked ' + button);
        }
        console.log(button);
    }
});