I have created one application. In the application I have used javascript confirm function a lot.

confirm("Do you want to proceed");

I don't like the default UI of confirm. I want to use customized confirm with better UI.

Problem:

I got some options for customized confirm. But if I will use them I need to change all default confirm methods(needs lot of changes).

Is there any way to achieve this in minimal change.

like:

window.confrim = function() {
        /*
           What logic I should write which will return the 
           value(true or false) selected by user.
        */

}

I have one JS file which is imported in all HTML files.

So I can place the above function logic in the mon JS file.

I have created one application. In the application I have used javascript confirm function a lot.

confirm("Do you want to proceed");

I don't like the default UI of confirm. I want to use customized confirm with better UI.

Problem:

I got some options for customized confirm. But if I will use them I need to change all default confirm methods(needs lot of changes).

Is there any way to achieve this in minimal change.

like:

window.confrim = function() {
        /*
           What logic I should write which will return the 
           value(true or false) selected by user.
        */

}

I have one JS file which is imported in all HTML files.

So I can place the above function logic in the mon JS file.

• javascript
• jquery
• html
• confirm

Share Improve this question Follow edited Jun 22, 2016 at 9:28 Dixit Singla asked Jun 22, 2016 at 9:19 Dixit SinglaDixit Singla 29322 gold badges77 silver badges1616 bronze badges 6

• 6 "Is there any way to achieve this in minimal changes." No - window.confirm is a blocking call, which you can't replicate with any form of styled elements etc. By all means make a better alternative, but you'll need to update all your calls to confirm to use a callback for any following code. – James Thorpe Commented Jun 22, 2016 at 9:21
• sweetalert, I think this library will fulfill your needs – Adam Azad Commented Jun 22, 2016 at 9:21
• 1 @AdamAzad This isn't modal. I mean OP would still need to replace somehow all his window.confirm calls – A. Wolff Commented Jun 22, 2016 at 9:22
• Or you could just style your own dialog box, and add scripts that prompts users for input – Akinjide Commented Jun 22, 2016 at 9:22
• @A.Wolff, true, but this is the only way to "customized confirm with better UI." Still, OP needs to consider what James pointed out. – Adam Azad Commented Jun 22, 2016 at 9:24

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 6

The biggest issue with customising confirm is that the native confirm is blocking. So you can just write:

if( confirm("Continue?")) {
    doStuff();
}

But your own code can't do that. Instead, you would need to create some kind of callback. An example might be:

myConfirm("Continue?",function() {
    doStuff();
},function() {
    cancelStuff();
});

Exactly how you implement this is up to you - I actually have a more flexible version of this on my projects, where I make a call of the form:

Dialog("Title", "Contents", [array of buttons]);
// [array of buttons] being an array of objects like:
{
    "text": "Button text",
    "action": function() {doSomething();},
    "optional_extras": "more stuff"
}

The cool thing about writing your own stuff is that you can extend it freely to suit your needs as the project grows.

Confirm box is part of the browser not the DOM. So, its not possible to modify that. You can try custom confirm boxes like http://jqueryui./dialog/#modal-confirmation OR

http://onehackoranother./projects/jquery/boxy/