JQUERY METRO ALERT v1.1

• Alert • Confirm • Prompt • Notification •

Features

  • Easy to use
  • Four themes included (GreenSea, Midnight, Pumpkin, Sky)
  • Crossbrowser (Firefox, Chrome, Safari, Opera, IE 6+)
  • Compatible with every layout
  • Responsive
  • Fully themeable (Globally, Particle)
  • Fully customizable
  • HTML Supported
  • Localization (Globally, Particle)

Default - Alert

Try it

$.alert({ title: "Metro Alert", message: "Alert Example" });

Prompt with Callback, Placeholder (Changing width)

Try it

$.prompt({
	message:"<b>How old are you?</b>",
	width: 300,
	vspace: 20,
	placeholder: "Please type your age",
	callback: function(respond){ 
		if(respond !== false){
			$.notification({
				message: "You are so young. Just "+ respond +"",
				position: "tl",
				interval: 5000,
				theme: "midnight"
			});
		}
	}
});

Callback / Theme / HTML Icon

Try it

$.alert({
	title:'<i class="fa fa-cog fa-2x"></i><br> Callback / Theme / HTML Icon', 
	message:"Callback loads when alert is closed. Focus on right bottom corner",
	theme: "pumpkin",
	callback: function(respond){ 
		$.notification({
			message: "Alert is closed!",
			position:"br",
			theme:"sky"
		});
	}
});

Backdrop / without Close button

Try it

$.alert({
	title:"BACKDROP",
	message:"Please click outside to close Alert.",
	close: false,
	backdrop: true,
	theme: 'sky',
	vspace: 30
});

Confirm with Callback (using GreenSea theme)

Try it

$.confirm({
	title:"Metro Confirm", 
	message:"Do you understand? Isn't it easy?<br>Your respond shown center.",
	callback: function(respond){ 
		var = respond 
			? "Of course it is so Easy" 
			: "Why don't you understand?";
		$.notification({
			message: msg, 
			position:"cc"
		});
	}
});

Notifications

Setting Positions and Themes by data-* settings:


$.notification({
	title:"HTML supported",
	message:"Notification contents are HTML supported too!",
	position: $(this).data("position"),
	theme: $(this).data("theme")
});

Custom buttons / Remove Close button and Title

Try it

$.alert({
	message:"We have three custom buttons. But without Title and Close button. Focus on top center.",
	buttons: {
		btnSome: "Some", 
		btnCustom: "Custom", 
		btnButtons: "Buttons"
	},
	close: false, // Removing Close button
	theme: 'midnight',
	vspace: 20,
	callback: function(respond){ 
		$.notification({
			message: "You have clicked on <b>"+ respond +"</b>!", 
			position:"tc",
			theme: "midnight"
		});
	}
});

Custom HTML supported / vspace / ESC key

Try it

$.alert({
	message:'<iframe width="560" height="315" src="..." frameborder="0"></iframe>',
	close: false,
	backdrop: true,
	theme: 'sky',
	vspace: 0,
	esc: true
});

MY OTHER WORKS

Thanks to Bootstrap for the great CSS Framework

Thanks to Font Awesome for the great icon library

Thanks to Google Fonts for the great font library