Is a Modal Confirm Box Using JQuery Possible?

Question

Looked around quite a bit, and can't seem to find a JQuery solution (maybe its just a limitation of JavaScript) for this:

<a href="somelink.php" 
   onclick="return confirm('Go to somelink.php?');">Click Here</a>

In the above example, when a user clicks on the link, it will only go to its href if the user clicks OK in the confirm box.

What I am trying to do is get a more modern look using a popup div. Perhaps something like this:

<a href="somelink.php" 
   onclick="return jq_confirm('Go to somelink.php?');">Click Here</a>

(Where jq_confirm is a custom JQuery confirm function that pops up a nice div with a YES/NO or OK/CANCEL button pair).

However, I cannot seem to find any such thing.

I have looked at some JQuery widget libraries etc which offer similar functionality, but none will wait for the response from the user (at least, not in the scenario described above), but instead they just proceed and take the user to the link (or run any JavaScript embedded in the href='' piece of the link). I suspect this is because while you can attach a callback function to many of these widgets to return a true/false value, the onclick event does not wait for a response (callbacks are asynchronous), thereby defeating the purpose of the confirm box.

What I need is the same kind of halt-all-javascript (modal) functionality that the default confirm() command provides. Is this possible in JQuery (or even in JavaScript)?

As I am not an expert in JavaScript nor in JQuery, I defer to you gurus out there. Any JQuery (or even pure JavaScript) solution is welcome (if possible).

Thanks -

Answer 1

Check out http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/

They have a good variety of modal-boxes for JQuery.

I think you should see http://www.ericmmartin.com/simplemodal/

A modal dialog override of the JavaScript confirm function. Demonstrates the use of onShow as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.

Answer 2

Put the redirect inside the function like:

<script>
    funtion confirmRedirect(url, desciption) {
       if (confirmWindow(desciption)) {
           window.location = url;
       }
    }
</script>

And call it like this:

<a href="javascript:confirmRedirect('somlink.php','Are you sure?')">Go!</a>

Answer 3

You should be able to override the standard window.confirm function be writing the following code.

window.confirm = modalConfirm

then you will need to make a function like this

function modalConfirm(message){
  // put your code here and bind "return true/false" to the click event
  // of the "Yes/No" buttons.
}

This should work, although I haven't tested it yet. I am going to do exactly this right now and will let you all know how it worked.

Edit: I have tested my example above now and it was not possible, you will have to pass in a callback function to your overwritten confirm function like this:

function modalConfirm(message, callback){
  ... 
  $("button.yes").click(function(){
     callback(result);
  });
  ...
}

..making your call to the function look like this:

confirm("Are you sure?", function(result){
  alert(result);
});

In other words, it is not possible to completely override the default window.confirm function without causing a nasty loop that causes the browser to hang. I think that you will have to modify your confirm calls like above.

Answer 4

Did you see the jQuery Modal Dialog on jQuery UI site?

• Modal Confirmation Dialog demo

Answer 5

I just had to solve the same problem. I wound up using the dialog widget from JQuery UI. I was able to implement this without using callbacks with the caveat that the dialog must be partially initialized in the click event handler for the link you want to use the confirmation functionality with (if you want to use this for more than one link). This is because the target URL for the link must be injected into the event handler for the confirmation button click.

Here's my solution, abstracted away to be suitable for an example. I use a CSS class to indicate which links should have the confirmation behavior.

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com"&gt;Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink"&gt;Or, you could click here</a>