marekjalovec / jquery-facebook-alert

A jQuery based alert() alternative that looks like generic Facebook dialog

This is very simple jQuery based alert() alternative that looks like generic Facebook dialog. It works fine in all major browsers but lacks border-radius and transparency in IE8 and have wrong size in IE7. These browsers weren't the main concern.

To see a demo go here and here

How to use it

This plugin is depends on jQuery so you have to include it (1.7.1 is the minimum tested version):

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Include the plugin javascript file and CSS:

	<script src="jquery.facebook.alert.js"></script>
	<link rel="stylesheet" href="jquery.facebook.alert.css">

The fbalert function have 4 params that changes its behavior:

• content - text or jQuery object
• callback - custom callback, used on all buttons, that don't override it
• title - custom title, by default is used the document's title
• buttons - custom set of buttons

Any custom callback is called with two values - button's identifier and jQuery object with whole #fbalert object (can be used as scope for selectors if you use custom HTML content).

Examples (fbalert.html):

	fbalert('Simple alert with default callback.');

	fbalert('Alert with custom callback', function() { alert('Custom callback called.'); fbalert_close(); });

	fbalert(
		// content
		'<strong>FBAlert</strong> test',
		// default callback
		function(button, fbalertObject) {
			alert('Button "' + button + '" clicked.');
			fbalert_close();
		},
		// custom title
		'Custom title',
		// custom buttons
		{
			'normal': {
				'name': 'Normal',
				'type': 'normal'
			},
			'primary': {
				'name': 'Primary',
				'type': 'primary'
			},
			'success': {
				'name': 'Success',
				'type': 'success'
			},
			'danger': {
				'name': 'Danger',
				'type': 'danger',
				callback: function(button, fbalertObject) {
					alert('Another callback with button "' + button + '".');
				}
			}
		}
	);

You can use this function together with the Friend selector (fbalert-fs.html).

	fbalert($('<div id="jfmfs-container" />'), function() {
		alert('Selected friends: ' + $("#jfmfs-container").data('jfmfs').getSelectedIds().join(', '));
		fbalert_close();
	});
	$("#jfmfs-container").jfmfs({ max_selected: 3 });