Customizable Confirmation Dialog Plugin - jQuery ajsr-confirm

ajsr-confirm is a simple, lightweight jQuery plugin for creating customizable, themeable confirmation popups to re-confirm user intentions on the webpage.

How to use it:

1. Load a theme CSS of your choice in the header of the html document. All available themes:

• Default (Bootstrap style)
• Prince Of Persia
• Synthwave
• Future Blue
• windows 98
• Pill

<link rel="stylesheet" href="/css/tmplt-default.css">
<link rel="stylesheet" href="/css/tmplt-prince-of-persia.css">
<link rel="stylesheet" href="/css/tmplt-synthwave-1.css">
<link rel="stylesheet" href="/css/tmplt-future-blue.css">
<link rel="stylesheet" href="/css/tmplt-windows-98.css">
<link rel="stylesheet" href="/css/tmplt-pill.css">

2. Load jQuery library and the ajsr-confirm plugin's main JavaScript at the end of the document so your webpage loads faster.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="ajsrConfirm.js"></script>

3. The JavaScript to create a basic confirmation dialog with custom confirm/cancel text.

$.ajsrConfirm({

  message: "Are You Sure?",
  confirmButton: "OK",
  cancelButton : "Cancel"

});

4. Execute callback functions as you click on the confirm/cancel buttons.

$.ajsrConfirm({

  message: "Are You Sure?",
  confirmButton: "OK",
  cancelButton : "Cancel",
  onConfirm: function() {
    console.log("Confirm!");
  },
   onCancel: function() {
    console.log("Cancel!");
  }

});

5. More customization options with default values.

$.ajsrConfirm({

  title: 'Attention!',
  message: 'Do you really want to do that?',
  okButton: 'OK',
  cancelButton: 'Cancel',
  btnFocus: 1, // Default selected button is 1, 'OK'. It can be set to 0, 'Cancel'. or false. Extra styling will be applied to default button.
  template: '',
  showCancel: true,
  css: '', // extra custom class at the end
  style: '', // extra custom style at the end
  bgStyle: '',
  nineCorners: false,

});

6. All possible callback functions.

$.ajsrConfirm({

  onConfirm: function(){ console.log("onConfirm(): do nothing by default"); },
  onCancel: function(){ console.log("onCancel(): do nothing by default"); },
  beforeShow: function(){ console.log("beforeShow(): do nothing by default"); },
  afterShow: function(){ console.log("afterShow(): do nothing by default"); },
  beforeClose: function(){ console.log("beforeClose(): do nothing by default"); },
  whenDestroyed: function(){ console.log("whenDestroyed(): do nothing by default"); }

});

Change log:

2018-05-26

• Allow setting default button

2017-11-01

• v1.2.2

---

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