Dead Simple Alert/Confirm/Prompt Dialog Plugin For jQuery

File Size: 16.3 KB
Views Total: 3684
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Dead Simple Alert/Confirm/Prompt Dialog Plugin For jQuery

The Really Simple Dialog jQuery plugin enables you to create customizable, CSS animated alert, confirmation and prompt dialog popups with custom 'Success' and 'Cancel' callback functions.

This plugin is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

How to use it:

1. Insert jQuery JavaScript library and the Really Simple Dialog plugin's files into your html page.

<link rel="stylesheet" href="really-simple-jquery-dialog.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="really-simple-jquery-dialog.js"></script>

2. The JavaScript to create a basic alert dialog.

<div id="testConfirm"></div>
$('#testAlert').simpleAlert({
  message: "Hello World!!"
});

3. The JavaScript to create a confirmation dialog with Success' and 'Cancel' callbacks.

<div id="testConfirm"></div>
$('#testConfirm').simpleConfirm({
  message: "Hello World!!",
  success: function() {
    $('#testAlert').simpleAlert({
      message: "You clicked Accept button."
    });
  },
  cancel: function() {
    $('#testAlert').simpleAlert({
      message: "You clicked Cancel button."
    });
  }
});

4. The JavaScript to create a prompt dialog with Success' and 'Cancel' callbacks.

<div id="testPrompt"></div>
$('#testPrompt').simplePrompt({
  message: "Hello World!!",
  success: function(result) {
    $('#testAlert').simpleAlert({
      message: "You clicked Accept button and your answer is: " + result
    });
  },
  cancel: function(result) {
    $('#testAlert').simpleAlert({
      message: "You clicked Cancel button and your answer is: " + result
    });
  }
});

This awesome jQuery plugin is developed by NTD3004. For more Advanced Usages, please check the demo page or visit the official website.