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

spModal is a simple yet multipurpose jQuery modal plugin which helps you create loading modal dialogs, message dialog boxes and modal windows with ease.

Modal Dialog

Documentation

jQuery.spModal

A Modal Window System plugin for jQuery.

Install

Install using bower package manager:

bower install jquery.sp-modal

Or copy the dist/ files in your preferred location.

Modal Dialogs

Modal Message

A Modal Message consist of a modal dialog box with a title, text and some buttons.

var message = $.spModal('message', 'Please Confirm', 'Do you want to destroy the world?'); message.addButton('Yes', function () {     // destroying the world and closing the dialog box     message.close(); }); message.addButton('No', function () {     console.log('That\'s good');     message.close(); });

Modal Message

See src/jquery.sp-modal-message.js and src/jquery.sp-modal-dialog.js for available methods.

Modal Loading

A Modal Loading consist of a modal dialog box with a loading image, text and some buttons.

var loading = $.spModal('loading', 'This process may take several years\nPlease be patient...'); loading.addButton('Cancel', function() {     loading.close(); });

Modal Loading

See src/jquery.sp-modal-loading.js and src/jquery.sp-modal-dialog.js for available methods.

Pre-Configured Modal Dialogs

Even though you can create a modal dialog from scratch, the library offers a set of pre-configured modal dialogs.

Creates a modal alert message:

$.spModal('alert', 'Message', 'This is a message');

Modal Alert Message

Creates a modal confirm message:

$.spModal('confirm', 'Please Confirm', 'Do you want to delete the item?', function () {     // deleting item });

Modal Confirm Message

Creates a modal error message:

// opens a modal dialog and throws an error $.spModal('error', 'Error', 'An error has occurred');  // or... $.spModal('error', 'Error', 'An error has occurred', function () {     // do something just before throwing the error });

Modal Error Message


You May Also Like