jquery.dialog.js

A lightweight replacement for the browser's boring default dialog boxes.

Getting Started

Embed jquery.dialog.css and jquery.dialog.js in your page.
Minified version: jquery.dialog.min.css, jquery.dialog.min.js

Requirements

This plugin has been tested with the following version of jQuery: 3.1.0.

Examples

Here's some basic examples on how to use the plugin:

Alert

Replaces the default alert() function.

dialog.alert({
	message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
});

Prompt

Replaces the default prompt() function.

dialog.prompt({
	message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
	callback: function(value){
		console.log(value);
	}
});

Confirm

Replaces the default confirm() function.

dialog.confirm({
	message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
	callback: function(response){
		console.log(response);
	}
});

Try it yourself!

Download the project and open example.html in your favorite browser or check out the online demo on codepen.io.

Options

title

^{Type: String
Default: ""
Affects: alert, prompt & confirm}
The title of the dialog.

dialog.alert({
	title: "This is a title",
	message: ...
});

message

^{Type: String
Default: ""
Affects: alert, prompt & confirm}
The body of the dialog.

dialog.alert({
	message: "This is a message"
});

button

^{Type: String
Default: "Ok"
Affects: alert, prompt & confirm}
The label of the confirmation button.

dialog.alert({
	message: ...,
	button: "This is a button"
});

cancel

^{Type: String
Default: "Cancel"
Affects: confirm}
The label of the cancellation button.

dialog.confirm({
	message: ...,
	cancel: "This is a cancel button",
	callback: ...
});

required

^{Type: Boolean
Default: false
Affects: alert, prompt & confirm}
Whether or not the user should interact with the dialog box.
Prevents the user from closing the dialog without entering any value.

dialog.confirm({
	message: ...,
	required: true,
	callback: ...
});

position

^{Type: String
Default: "fixed"
Affects: alert, prompt & confirm}
Changes the css positioning of the dialog box. Can be either fixed or absolute.

dialog.alert({
	message: ...,
	position: "absolute"
});

animation

^{Type: String
Default: "scale"
Affects: alert, prompt & confirm}
The animation used to animate the dialog box. Can be either scale, fade or slide.

dialog.alert({
	message: ...,
	animation: "slide"
});

input

^{Type: Object
Default: { type: "text" }
Affects: prompt}
List of attributes to apply to the prompt input.

dialog.prompt({
	message: ...,
	input: {
		type: "password",
		placeholder: "This is a placeholder..."
	},
	callback: ...
});

validate

^{Type: Function
Default: function(value){}
Affects: prompt}
Function used to validate the submitted value. The passed function should return true or false.
Prevents the dialog box from closing if the submitted value is invalid.

dialog.prompt({
	message: ...,
	validate: function(value){
		if( $.trim(value) === "" ){
			return false;
		}
	},
	callback: ...
});

callback

^{Type: Function
Default: function(value){}
Affects: alert, prompt & confirm}
The function to be executed when the user closes/submits the dialog box.
The returned value is null if the user closes the dialog box.

dialog.prompt({
	message: ...,
	callback: function(value){
		console.log(value);
	}
});

Methods

close

Programmatically close the currently visible dialog box.

dialog.close();

Built With

• Grunt - The JavaScript Task Runner
• jQuery - A fast, small, and feature-rich JavaScript library
• Sass - Syntactically Awesome Style Sheets

Contributing

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.

Update the README.md with details of changes to the plugin.

Update example.html with examples demonstrating the changes to the plugin.

Build the project & test all the features before submitting your pull request.

Authors

• Etienne Martin - Initial work - etiennemartin.ca

License

This project is licensed under the MIT License - see the LICENSE.txt file for details.