Easily Create a Modal Dialog Box with Callbacks - JavaScript

With one block of codes, you can create a modal Alert and Confirm dialog box with callbacks. It has the following functions:

1. Alert Dialog Box (without a callback)

2. Alert Dialog Box (with a callback)

3. Confirm Dialog Box (with callbacks - yes and no)

The reason I created this code was that the alert and confirm windows in a browser is not customizable and their design is from the stone age. The code below is based on the Bootstrap Modal Dialog Box.

---

Insert the code below. The code below is the customized version of Bootstrap Modal Dialog Box. You will need to play with CSS classes to design the dialog box as your needs.

The following explains the code above:

1. Alert without a callback - btnSectionAlert will be shown.

2. Alert with a callback - btnSectionConfirm1B will be shown and the callback function will be triggered when Close button is pressed.

3. Confirm with callbacks - btnSectionConfirm2B will be visible and pressing Yes and No will trigger an appropriate callback function.

Then you will use the following JavaScript code to manipulate DOM elements. The code uses jQuery.

Next you are defining the callback functions using the code below.

At last, after pressing a button in showDialog function, a callback function will be triggered depending on the "result" value. The code below is an example on how to call showDialog function to open a dialog box.

Alert

Alert with a Callback

Confirm