jQuery UI: Show dialog that user must confirm or cancel

Question

I have a few links on my site that will need to show a modal dialog when the user clicks on one of them. The modal will contain a message like: You are now leaving the "SECTION NAME" part of "SITE NAME". The user will then either accept which will allow the user to continue on with their request or cancel which will keep the user where they are.

An example of a link would be: <a href="/interests" title="My Interests" target="_blank" class="leaving-section">My Interests</a>

So as you can see the class of leaving-section would cause the link to do what I have specified above, and will also open the link in a new tab/window BUT the user must first accept that they are aware they are being taken to another part of the site.

I have looked at the docs but I haven't seen any examples where a) the dialog is created on the fly rather than hiding and showing a div and b) allowing the user to confirm and being sent to their original location i.e. the url which they clicked.

This is what I have so far:

$("#leaving-section").dialog({
            resizable: false,
            modal: true,
            buttons: {
                "I understand, take me there": function () {
                    $(this).dialog("close");
                },
                "I want to stay where I am": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('.leaving-section').click(function (event)
        {
            event.preventDefault();
            var $dialog = $('#leaving-section');
            $dialog.dialog('open');
        });

But I want to the modal to be created by jquery instead of the div being embedded in the page! Also how do I get the first button to send them off to their original destination?

Thanks to all who can help. Thanks

How do I get the dialog to allow a user to accept and be sent to the original url or cancel and stay where they are. — Cameron, Aug 02 '11 at 09:15
cancel is easy, as you can just define that in the modal. Going to a url though, you define that as well, but you would use something like window.location or location.href — Matt, Aug 02 '11 at 09:22

score 6 · Accepted Answer · answered Aug 02 '11 at 09:34

I just had to solve the same problem. The key to getting this to work was 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. I used a CSS class to indicate which links should have the confirmation behavior.

Here's my solution, abstracted away to be suitable for an example.

<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">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

I believe that this would work for you, if you can generate your links with the CSS class (confirmLink, in my example).

score 0 · Answer 2 · answered Aug 02 '11 at 09:11

0

I think this plugin may be help

http://jqueryui.com/demos/dialog/#modal-confirmation

answered Aug 02 '11 at 09:11

Manikandan Thangaraj

1,594
8
24
44

Hi yes I have looked at that. But how do I make the confirm send the user to the original link or does it handle that by default? Also I don't wish to have markup on the page I would prefer to do it all in the script as it's not page content. Cheers – Cameron Aug 02 '11 at 09:13
Try this http://stackoverflow.com/questions/2842477/how-to-give-user-confirmation-message-before-actionlink-based-on-validation – Manikandan Thangaraj Aug 02 '11 at 09:28

score 0 · Answer 3 · edited May 23 '17 at 12:04

Heres an example of how you can do it:

http://jsfiddle.net/yFkgR/3/

Or to do something besides cancel

http://jsfiddle.net/yFkgR/4/

You can just define your own buttons. You can style the dialog box anyway you want, i just used the default.

also to use ajax to load the html you can take a look at:

jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs

There is an open option you can use to load html from a remote web page. I jquery you can create a div just be doing

$("<div>");

it will create the closing tag too. Or as suggested in the post you can also use

$('a.ajax')

jQuery UI: Show dialog that user must confirm or cancel

3 Answers3