Usage

Include this to your project, jquery is not required..

<link type="text/css" rel="stylesheet" href="hoopear.min.css"><script type="text/javascript" src="hoopear.min.js">

Dialog

Confirm Dialog

hoopear.dialog({
	title : "Confirmation",
	message : "Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ??",
	buttons : ["No", "Yes"],
	callback : function (result) {
		hoopear.note("You have clicked " + result);
	}
});

Prompt Dialog

hoopear.dialog({
	message : "Enter your username and password:",
	fields :
		''+
		'',
	buttons : ["Close", "Submit"],
	callback : function (btn, data) {
		hoopear.note("You have clicked " + btn + "" +
					 "
 Username = " + data.username +
					 "
 Password = " + data.password);
	}
});

Alert Dialog

hoopear.dialog({
	title : "Alert",
	message: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.",
	buttons: false
});

Custom Dialog

hoopear.dialog({
	message : "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.",
	width : "550px",
	buttons : {
		"Yes" : function () {
			hoopear.note({message: "You have clicked Yes..", type: "success"});
		},
		"No" : function() {
			hoopear.note({message: "You have clicked No..", type: "error"});
		},
		"Cancel" : function() {
			hoopear.note({message: "You have clicked Cancel.."});
		}
	}
});

Notification

Default Message

hoopear.note("You have a new default message!");

Info Message

hoopear.note({
	message: "You have a new info message!",
	type: "info"
});

Success Message

hoopear.note({
	message: "You have a new success message!",
	type: "success"
});

Warning Message

hoopear.note({
	message: "You have a new warning message!",
	type: "warning"
});

Error Message

hoopear.note({
	message: "You have a new error message!",
	type: "error"
});

Long Message

hoopear.note("Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.");

Inline Message

hoopear.note({
	message: "You have a new warning inline message with custom timeout and insert method!",
	container: "#note-inline",
	maxItems : 1, // items number in queue
	prepend: true, // insert method to container if false mean append
	timeout: 5000
});

Block Element

Page Block

hoopear.block({closeable: true});

Content Block

hoopear.block({container: '.main'}); // see at the notification section

Remove Block

hoopear.unblock();

Browser Support

Tested and work perfectly on latest Firefox, Opera, and Google Chrome. It seem doesn't work perfectly on ie9, but should work in many others.

TO DO

Add prompt and inline dialog
Add onclick callback on block element function
Add float notification and dialog feature
Complete the documentation
More browser support

License

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Hoopear.js

Modal Dialog, Notification, and Blocking Element in One Library