Customizable jQuery Confirm Dialog Plugin - alexDialog

alexDialog is a simple yet heavily customizable jQuery plugin that pops up a dialog box with Yes/No buttons for action confirmation.

How to use it:

1. Include jQuery library and the jQuery alexDialog plugin on your web page.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/alexDialog.js"></script>

2. Create a button to trigger a confirm dialog.

<button id="btn">Click me!</button>

3. Create an empty to place the confirm messages.

<p id="txt"></p>

4. Call the plugin and customize the confirm dialog.

$("#btn").click(function(){
  alexDialog({
    "width": 300,
    "title": "Warning!",
    "descr": "This action may cause an extreme damage to your system! Are you sure you want to execute it?",
    "btns": [{
      "text": "Yes",
      "handler": function(){
        $("#txt").css("color", "green").html("I have pushed the confirm button!");
        },
      "background": "green",
      "fontColor": "#fff"
    }, {
      "text": "No",
      "handler": function(){
        $("#txt").css("color", "grey").html("I have pushed the cancel button because I do not want to do it!");
        }
    }],
    "toTop": 150,
    "borderRadius": 3,
    "backgroundColor": "#fff",
    "borderColor": "#999",
    "titleColor": "#333",
    "titleFontSize": 16,
    "titleBackgroundColor": "#ddd",
    "titleBorderColor": "#999",
    "descColor": "#d90001",
    "descSize": 14,
    "descLineHeight": 1.5
  });
});

Change log:

2016-07-23

• JS & CSS update

---

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