Customizable Confirmation Dialog Plugin - jQuery ajsr-confirm

File Size: 200 KB
Views Total: 1836
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="ajsrConfirm.js"></script>

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


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


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


  message: "Are You Sure?",
  confirmButton: "OK",
  cancelButton : "Cancel",
  onConfirm: function() {
   onCancel: function() {


5. More customization options with default values.


  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.


  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:


  • Allow setting default button


  • 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.