Alert! A JavaScript Popup!

The latest version of this documentation can be found at www.jjok.co.uk/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] )

To use the Alert, simply create a new instance of the Alert class. The constructor for the class can take two 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)
<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.
button (bool)
If set to 'true', the popup will have a 'close' button, and will stay showing until the button is clicked. Otherwise, the popup will automatically disappear. Defaults to false.
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,
			button: true,
			position: {
				center: true,
				type: 'fixed',
				top: 100,
				right: 100,
				bottom: 100,
				left: 100
			}
		}
	);

</script>

Here's a more sensible example:

<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,
				button: true,
				position: {
					type: 'fixed',
					top: 50,
					right: 50
				}
			}
		);
	});

</script>

Download

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

Styling with CSS

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

Here's an example:

<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