Unobtrusive Confirm Javascript Replacement with jquery UI Dialog

Today I needed to implement an unobstrusive replacement for native alert and confirm functions for a client’s project. I searched a lot of libs and solutions but none of them worked as I wanted. So I decided to at least try to implement one real unosbtrusive replacement.

Here we go. First we need jQuery, jQuery UI Core (core, widget, position) and widget (dialog), choose any theme and we are set.

Take a look at the code below:

After that i need to overload the native confirm function. Check the next code:

Note that this function you can customize whatever you want, but here I’m using jQuery UI Dialog. You can try your own if you want, just pay attention on line 13, when I throw the callback. Of course, this is the first draft of workaround, maybe someone can increment the idea.

Heres the full code:

Did you like this? Share it:

9 Comments

  • Jason Day |

    I have a large js file with a lot confirms for validation, that require a return true to work properly. Will this work within that context?

  • Charlie |

    Is there a way to trap a right-click and turn it into a left-click within your current script?

  • Charlie |

    Thanks. I’ve added Jeff B.’s suggestion shown below (I hope) and I think it will work for me. One question, may I use your code with attribution? Thanks.

    document.oncontextmenu = function (event) {
    event.target.click();
    return false;
    }
    document.getElementById(“test”).onclick = function () {
    alert(“Clicked!”);
    return false;
    }
    document.onclick = function (e) {
    if (e.ctrlKey) {
    return false;
    }
    }

  • Charlie |

    Please forgive my denseness, but I’m trying to figure out how to use this to verify whether the user is ready to submit a form. Currently the form looks something like this:

    // stuff in the form

    and the called function is this:

    function verify(){
    msg = “Are you sure?”;
    return confirm(msg);
    }

    What do I need to do to replace my “verify” function with your confirm dialogue?

    Thanks.

  • Charlie |

    Sorry but I must have used code that your message board won’t accept. Let me try to describe it:

    The form action equals the name of a php file. onSubmit equals “return verify()” and the method is “post”.

    Then after the stuff in the form, the input type equals “submit” as does the name. The value is “Click when finished.”

  • 83Nora |

    Hello blogger, i must say you have very interesting articles
    here. Your blog should go viral. You need initial
    traffic only. How to get it? Search for; Mertiso’s tips go viral

So, what do you think ?