🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Just another jQuery based native JS popup enhancement plugin that lets you create responsive, flexible alert, prompt and confirmation dialog boxes on the web application.

alert confirm popup Dialog prompt

Documentation

jquery.dialog.js

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

Alert dialog Prompt dialog Confirm dialog

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

License

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


You May Also Like