Clean Customizable jQuery Alert & Dialog Plugin - ClassyPopup

File Size: 76.2 KB
Views Total: 2956
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Clean Customizable jQuery Alert & Dialog Plugin - ClassyPopup

ClassyPopup is a small yet highly configuration jQuery plugin that popups alert & dialog windows to display important messages for your website/app. Used for replacing Javascript alert() native function. The messages can be static HTML elements or dynamic content loaded with AJAX. The plugin comes with a centerOnResize option for responsive web design that can be used to specify whether the popup should stay centered on window resize.

Basic Usage:

1. Link the latest version of jQuery javascript library directly from the Google CDN.

<script src=""></script>

2. Make sure to load the jQuery classypopup plugin after jQuery library.

<script src="js/jquery.classypopup.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classypopup.min.css" />

3. Load the jQuery UI library if you want to make the alert dialog window draggable.

<script src=""></script>

4. Create a button to toggle an alert window.

<input id="alert" type="button" value="Click me" />

5. Initialize the plugin with default options and set the content for the alert.

$('#alert').click(function() {
alert('Hello world');

5. Customize the alert window.

$(document).ready(function() {
$('#alert').click(function() {
override: true, // if set to true, calling alert(text) will fire ClassyPopup with your text inside
background: 'black', // used to specify the background shade, can be white, black, or none
fade: true, // used to specify whether the popup should fade in or appear instantly
text: '', // the message displayed in the content pane
width: '400px', // specify the ClassyPopup's title.
title: 'jQuery Script',
rightButtons: ['OK'], // add buttons on the right side of the popup
leftButtons: ['Close'], // add buttons on the left side of the popup
onOpen: function() { // callback function for when the popup has fully opened. Perfect for loading data via ajax to the content pane 
 $('<span />').load('demo.html').appendTo('.pcontent');
onClick: function() {} //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

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