Alert! A JavaScript Popup!

Hi. I made a JavaScript popup. Have a look. You can use it, if you want.

It requires jQuery 1.4 or later.

Basic Useage

Alert( message [, options [, callback 1 [, callback 2 ]]] )

To use the Alert, simply create a new instance of the Alert class. The constructor for the class can take up to four parameters:

message (string)
The text to be displayed in the popup. (required)
options (object)
Various additional parameters to customise the behaviour of the popup. (optional)
callback 1 (function)
A function to be called when a 'close' button, or the first of two 'confirm' buttons is clicked. Can be the name of a function, or an anonymous function. (optional)
callback 2 (function)
A function to be called when the second of two 'confirm' buttons is clicked. Can be the name of a function, or an anonymous function. (optional)
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript" src="alert-mini-latest.js"></script>
<script type="text/javascript">

	new Alert("Here's an example of what I'm talking about.");

</script>

Options

width (int)
The width of the box in pixels. Defaults to 200.
border (string)
The border of the popup. Accepts any valid CSS border value. Defaults to '1px solid #000'.
padding (int)
The padding of the box in pixels. Defaults to 10.
speed (int)
The speed, in milliseconds, of each section of the animation. Defaults to 400.
wait (int)
The length of time, in milliseconds, the popup will show for, before disappearing. It is not used if button is set to 'true' (see below). Defaults to 3000.
buttonType (string)
If set to 'close', the popup will have a 'close' button in the top-right, and will stay showing until the button is clicked. If set to 'confirm', two HTML buttons will be added at the bottom of the popup and it will stay showing until one of them is clicked. Otherwise, the popup will automatically disappear.
buttons (object, array)
If 'buttonType' is set to 'close', this argument can be an object. If 'buttonType' is set to 'confirm', it can be array with 2 objects.
text (string)
The text to be shown in the button. If the 'buttonType' is 'close', defaults to 'close'. If the 'buttonType' is 'confirm', defaults to 'Confirm' for the first button and 'Cancel' for the second.
title (string)
The title which will been shown in the tooltip, when the user hovers their mouse over the button. If the 'buttonType' is 'close', defaults to 'Close this notice'. If the 'buttonType' is 'confirm', defaults to 'Confirm' for the first button and 'Cancel' for the second.
classes (string)
One or more classes to be added to the button. If the 'buttonType' is 'close', defaults to 'close'. If the 'buttonType' is 'confirm', defaults to 'confirm' for the first button and 'cancel' for the second.
background (string)
Sets the background colour of the popup. Accepts any valid CSS background value. Defaults to white.
id (string)
A unique ID attribute to be added to the alert.
position (object)
The position object can take 6 different parameters:
center (bool)
If set to 'true', the popup will be positioned in the center of the screen. Defaults to false.
type (string)
If set to 'absolute', the popup will scroll with the rest if the page. If set to 'fixed', the popup will stay in the same position, even when the page is scrolled. Defaults to 'fixed'.
top, bottom, left, right (int)
The position of the popup, in pixels. If not using 'center', two of the values must be given: top or bottom and left or right.

Here's an example using all the possible options. Obviously, you can't use the top, bottom, left, right and button options all at the same time, because that doesn't make sense.

<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript" src="alert-mini-latest.js"></script>
<script type="text/javascript">

	new Alert(
		'This is the popup in action.', {
			width: 200,
			border: '1px solid red',
			padding: 10,
			background: '#FFF',
			speed: 400,
			wait: 3000,
			buttonType: 'confirm',
			buttons: [{
				text: 'Text for button 1',
				title: 'Title of button 1',
				classes: 'confirm-button'
			}, {
				text: 'Text for button 2',
				title: 'Title of button 2',
				classes: 'cancel-button'
			}],
			position: {
				center: true,
				type: 'fixed',
				top: 100,
				right: 100,
				bottom: 100,
				left: 100
			}, function() {
				new Alert('This is the callback for button 1.');
			}, function() {
				new Alert('This is the callback for button 2.');
			}
		}
	);

</script>

Here's a more sensible example: click me

<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript" src="alert-mini-latest.js"></script>
<script type="text/javascript">

	$('.new-popup').bind('click', function() {
		new Alert(
			'This is the popup in action. This one features a close button.', {
				width: 200,
				border: '1px solid #999',
				padding: 15,
				background: '#EEE',
				speed: 400,
				buttonType: 'close',
				position: {
					top: 50,
					right: 50
				}
			}
		);
	});

</script>

Here's an example with buttons and callback functions: click me

<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript" src="alert-mini-latest.js"></script>
<script type="text/javascript">

	$('.confirm-popup').bind('click', function() {
		new Alert(
			'Please confirm if you really want to do this.', {
				buttonType: 'confirm'
			}, confirm, cancel
		);
	});

	//Do this when someone click confirm
	function confirm() {
		new Alert('You just clicked button 1!');
	}

	//Do this when someone clicks cancel
	function cancel() {
		new Alert('You just clicked button 2!');
	}

</script>

Download

You can download a minified version of the code from http://downloads.jjok.co.uk/javascript/alert-mini-latest.js.

Styling with CSS

The look of the Alert can be completely styled using CSS.

Here's an example: click me

<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript" src="alert-mini-latest.js"></script>
<script type="text/javascript">

	$('.css-popup').bind('click', function() {
		new Alert(
			'Here is my message. Here is my message. Here is my message. Here is my message. Here is my message.',
			{button:true}
		);
	});

</script>
<style type="text/css">

	.alert {
		-webkit-border-radius:4px;
		-moz-border-radius:4px;
		border-radius:4px;
		-moz-box-shadow:5px 5px 10px #CCC;
		-webkit-box-shadow:5px 5px 10px #CCC;
		box-shadow:5px 5px 10px #CCC; 
		background:rgba(240, 240, 240, 0.6);
		padding-right:16px !important;
	}
	.alert .close {
		overflow:hidden;
		padding:0 0 0 8px;
		width:0;
		height:8px;
		top:4px !important;
		right:4px !important;
		border:1px solid #666;
		background:#FCC;
	}
	.alert .close:hover { 
		background:#F33;
	}

</style>

Notes

The height of the box cannot be specified in the options. It is worked out automatically, depending on the size of the content.

The library has been tested for compatibility with the following browers:

ChangeLog