Alert.js

Beautifully crafted responsive javascript alert boxes.

This project is written in plain javascript and has no dependencies.

Version

Current version is v0.0.0 (~6.5KB minified)

Browser Support

All modern browsers and Internet Explorer 9+

Installation

bower install alert.js

Getting Started

1. Include script

   <script src="dist/alert.min.js"></script>
   

2. Include style

   /* core css */
   <link rel="stylesheet" href="dist/alert.core.min.css" />
   
   /* theme: default or lite */
   <link rel="stylesheet" href="dist/alert.default.min.css" />
   

Basic Usage

Alert box

alertjs.show({
	title: 'Error!',
	text: 'You must fill all fields to continue',
	from: 'top', //drop from top,
	effect: 'ease-in-bounce',
	wait: 500,
	success: function() {
		//user clicked OK button
	},
	cancelled: function() {
		//user clicked cancel button
	},
	complete: function( val ) {
		//this callback is available everytime.
		//val determines what user clicked.
	}
});

Confirm dialog

alertjs.show({
	type: 'confirm',
	title: 'Confirm',
	text: 'Are you sure you want to perform this action?',
	from: 'left', //slide from left		
	complete: function( val ) {
		if( val ) {
			//clicked ok
		} else {
			//clicked cancel
		}
	}
});

Prompt dialog

alertjs.show({
	type: 'prompt',
	title: 'Please enter your name to continue',
	text: 'Enter your name here:',
	from: 'right', //slide from left
	success: function( val ) {
		//user clicked OK button
		//input box value will be available here
		var value = 'Your name is ' + val;
		if( val === '' ) {
			value = 'You didn\'t type anything!';
		}
		alertjs.show({
			title: 'Alert.js',
			from: 'top',
			effect: 'ease-in-bounce',
			text: value
		});
	},
	cancelled: function() {
		//user clicked cancel button
	},
	complete: function( status, val ) {
		console.log(status, val);
	}
});

Using custom HTML for message
HTML can be in any format but it should be wrapped with an ID

<div id="myCustomDialog" style="display: none">
	<div class="dialogWrapper">
		Like us on facebook
		<!-- facebook like box -->
	</div>
</div>

Call alert box as follow

alertjs.show({
	title: 'Error!',
	text: '#myCustomDialog', //must be an id
	from: 'top'
});

Custom form
You can also use custom form in alert box. Data from evey input fields will be available in name value pairs in success and complete callback. If the name attribute is not provided, numeric index is used.

//For example in success callback
//you can do something like this
success: function( val ) {
			var str = '';
			for( var prop in val ) {
				str += "<label>" + prop + ":</label> " + val[prop] + "<br/>";
			}

			alertjs.show({
				title: 'You entered following values:',
				text: str
			});
		}

Using custom attribute for buttons
You can provide label and attributes for button as shown below.

alertjs.show({
	type: 'confirm',
	title: 'Delete Permanently',
	text: 'Are you sure you want to delete the file permanently?',
	buttons: {
		OK: {
			label: 'Continue',
			attrs: {
				'class': 'continue btn',
				id: 'continueBtn'
			}
		},
		CANCEL: {
			label: 'Go back',
			attrs: {
				'class': 'btn btn-back'
			}
		}
	},
	wait: 500
});

Display alert 10sec after site loads

//Demo: Like the one displayed at the very beginning of this page
window.onload = function() {
	setTimeout(function() {
		alertjs.show({
				title: 'Welcome to our site!',
				text: 'Thank you for visiting our site.',
				buttons: {
					OK: {
						label: 'Continue'
					}
				},
				effect: 'shake',
				overlay: false,
			});
		}, 10000);
}

Available Options

Callbacks

Platforms we are testing on

• Ubuntu 14.04 LTS

  • Mozilla Firefox 34+, Chrome & Chromium 38+, Opera 25+

• Windows 7 & 8

  • Internet Explorer 9+, Firefox 34+, Chrome 38+, Opera 25+, Safari 5.1.7

• iPhone 4 & 5

• Android (Samsung & Nexus)

Setting up entire project locally

1. Clone the repo

   git clone [email protected]:ankitpokhrel/alert.js.git
   

2. Install dev dependencies

    npm install  
    npm update
   

3. Make changes. jshint and uglify using grunt.

   grunt
   

4. Run jasmine tests using karma

   karma start
   

Contribution

Feel free to fork, try and report any bug found. Pull requests, issues, and plugin recommendations are more than welcome!

Known bugs

1. Animation is not smooth sometimes.

License

alert.js is licensed under MIT http://www.opensource.org/licenses/MIT

Copyright

Copyright ©, Ankit Pokhrel (http://ankitpokhrel.com.np, @ankitpokhrel)