Minimal Confirmation Dialog Plugin For jQuery - alertBox

Minimal Confirmation Dialog Plugin For jQuery - alertBox

alertBox is a lightweight and configurable jQuery confirmation dialog plugin used to confirm an action on click of an element.

1. Load the style sheet alertBox.css in the head, and the JavaScript alertBox.js after jQuery JavaScript library.

<link href="alertBox.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="alertBox.js"></script>

2. Attach the confirm dialog to a specific element.

<input id="btn" type="button" value="Clicm Me">
$('#btn').on('click', function () {
  $('body').alertBox({
    title: 'Confirmation Dialog',
    lTxt: 'Cancel',
    lCallback: function(){
      alert('You just clicked Cancel button.');
    },
    rTxt: 'Confirm',
    rCallback: function(){
      alert('You just clicked Confirm button.');
    }
  })
})

3. All default options to customize the confirmation dialog.

  • zIndex: z-index property
  • title: dialog title
  • lTxt: text for left button
  • lBgColor: background color of left button
  • lFontColor: text color of left button
  • lCallback: callback function
  • rTxt: text for right button
  • rBgColor: background color of right button
  • rFontColor: text color of right button
  • rCallback: callback function
$('body').alertBox({
  zIndex: 99999,
  title: '',
  lTxt: '',  
  lBgColor: "#D4D4D4",
  lFontColor: "#333", 
  lCallback: function(){},
  rTxt: '',
  rBgColor: "#ED6465", 
  rFontColor: "#fff",
  rCallback: function(){}
})

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

  • Publication date: 20.11.2017
  • Source