Create confirmation box with "accept" and "deny"

Question

How would I make a dialog box with two options, accept and deny, when a user visits my website ? I need the accept button to continue to my website, and the deny button to take the visitor to their last webpage.

So far I have:

var confirmation = confirm('Do you want to continue on this website?');
if (!confirmation){
    // Redirect the user to his last webpage:
    history.go(-1);
}

you will have to use a 3rd party library such as bootstrap or jqueryui. — Daniel A. White, Dec 29 '13 at 20:26
A lot of frameworks provide customizable pop-ups. Is using one of those an option? (@DanielA.White - You don't **have** to use a third-party library; it's just a lot more convenient if you do.) — Ted Hopp, Dec 29 '13 at 20:26
http://stackoverflow.com/questions/6929416/custom-confirm-dialog-in-javascript?rq=1 , http://stackoverflow.com/questions/887029/how-to-implement-confirmation-dialog-in-jquery-ui-dialog?rq=1 , http://stackoverflow.com/questions/16929370/how-to-personalize-alert-buttons-window-confirm-and-window-alert?lq=1 — user2864740, Dec 29 '13 at 20:37

score 1 · Answer 1 · answered Dec 29 '13 at 20:31

If you want to use jquery then you include Jquery in your page and define following function

function confirmation(question) {
var defer = $.Deferred();
$('<div></div>')
    .html(question)
    .dialog({
        autoOpen: true,
        modal: true,
        title: 'Confirmation',
        buttons: {
            "Accept": function () {
                defer.resolve("true");//this text 'true' can be anything. But for this usage, it should be true or false.
                $(this).dialog("close");
            },
            "Deny": function () {
                defer.resolve("false");//this text 'false' can be anything. But for this usage, it should be true or false.
                $(this).dialog("close");
            }
        }
    });
return defer.promise();
};

Then use it in following way

 confirmation('Do you want to continue on this website?').then(function (answer) {

                if (answer == "false") {
                    // your logic

                }
                else if (answer == "true") {
                    // your logic
                }
            });

Seth · Answer 2 · 2014-03-25T21:37:18.347

If you want to use jQuery UI you could do it like this:

HTML:

<div id="ask">
    <h1> Some title </h1>
    <p> Some info </p>
</div>

JS:

  $(function() {
    $( "#ask" ).dialog({
      resizable: false,
      modal: true,
      buttons: {
        "Allow": function() {
            alert("You have been allowed");
            // more allow code here
        },
        "Deny": function() {
            alert("You have been denied");
            history.go(-1);
            // more deny code here
        }
      }
    });
  });

FIDDLE

You will have to include jQuery UI in your page.

Create confirmation box with "accept" and "deny"

2 Answers2

HTML:

JS: