I'm trying to replace the standard javascript confirm with a twitter bootstrap modal window. Everything is almost working (the modal is shown with its confirm text), but I'm stuck trying to catch the caller href, which I need to bind the "ok" button.

Here's my code (almost working example: /):

jQuery.altConfirm = function (options) {
    var box = '<div class="modal fade static" id="confirm" data-backdrop="static" tabindex="-1" role="dialog">';
        box += '<div class="modal-dialog">';
            box += '<div class="modal-content">';
                box += '<div class="modal-body"> </div>';
                box += '<div class="modal-footer">';
                    box += '<button type="button" class="btn btn-default" data-dismiss="modal">No</button>';
                    box += '<button type="button" class="btn btn-primary">Ok</button>';
                box += '</div>';
            box += '</div>';
        box += '</div>';
    box += '</div>';
    $("body").append(box);

    window.confirm = function () {
        $(".modal-body").html( arguments[0].replace(/\n/, "<br />") );
        $('.modal').modal();
        $(".btn-default").on('click', function() {
            $(this).modal('hide');
        });
        $(".btn-primary").on('click', function() {
            return true; // this is where I need the caller's HREF, 
                         // to make it actually proceed.
                         // Return true, obviously, does nothing.
        });
    };
};

$(document).ready(function() {
    $.altConfirm();
});

Any hint? Please note that I would like this to be a drop-in replacement for standard javascript confirm, so modifying the way the confirm itself is called it is not a possibility (if this plugin is active -> then the modal is shown, if this plugin is not active -> then the standard confirm is fired).

I'm trying to replace the standard javascript confirm with a twitter bootstrap modal window. Everything is almost working (the modal is shown with its confirm text), but I'm stuck trying to catch the caller href, which I need to bind the "ok" button.

Here's my code (almost working example: http://jsfiddle/k5uDw/):

jQuery.altConfirm = function (options) {
    var box = '<div class="modal fade static" id="confirm" data-backdrop="static" tabindex="-1" role="dialog">';
        box += '<div class="modal-dialog">';
            box += '<div class="modal-content">';
                box += '<div class="modal-body"> </div>';
                box += '<div class="modal-footer">';
                    box += '<button type="button" class="btn btn-default" data-dismiss="modal">No</button>';
                    box += '<button type="button" class="btn btn-primary">Ok</button>';
                box += '</div>';
            box += '</div>';
        box += '</div>';
    box += '</div>';
    $("body").append(box);

    window.confirm = function () {
        $(".modal-body").html( arguments[0].replace(/\n/, "<br />") );
        $('.modal').modal();
        $(".btn-default").on('click', function() {
            $(this).modal('hide');
        });
        $(".btn-primary").on('click', function() {
            return true; // this is where I need the caller's HREF, 
                         // to make it actually proceed.
                         // Return true, obviously, does nothing.
        });
    };
};

$(document).ready(function() {
    $.altConfirm();
});

Any hint? Please note that I would like this to be a drop-in replacement for standard javascript confirm, so modifying the way the confirm itself is called it is not a possibility (if this plugin is active -> then the modal is shown, if this plugin is not active -> then the standard confirm is fired).

• javascript
• jquery
• twitter-bootstrap

• Instead of reinventing the wheel, try having a look at bootbox.js – DhruvPathak Commented Jun 10, 2014 at 11:27
• bootbox.js is nice, but it's not what I'm looking for. I need something which I can call using a standard confirm's code, extending it. Something like progressive enhancement :) – ToX 82 Commented Jun 10, 2014 at 12:02

3 Answers 3

I've updated your fiddle with a solution that rewrites the code on the fly; useful solution if your code is generated by a framework and you can't/don't want to change the framework's function that writes it:

http://jsfiddle/k5uDw/16/

on document ready(), it looks up for tags and if finds a "confirm" call, then update the parameter passed to it in order to store some other informations (link to open or action to execute when ok is pressed on the modal); then the function that overrides the standard confirm(), returns always false (to stop execution) and handles what has to be done when user press ok on the modal:

$(document).ready(function() {
            console.log('loading done');

            jQuery.each($('body').find('a'), function(i, val) {

                var hrefAttr = ($(val).attr('href'));

                $(val).attr('href', '');

                $(val).attr('onClick', function(index, value) {
                    if (value != undefined) {

                        var att = '-';
                        if (hrefAttr == '#') {
                            att = $(this).attr('onclick');
                            //att = att.match(/{ (.*) }/);
                            att = att.substring(att.indexOf('{') + 1, att.indexOf('}'));
                        }
                        if (value.indexOf("confirm('") >= 0) {
                            return value.replace("confirm('", "confirm('" + hrefAttr + ' ' + att + ' ');
                        }
                        if (value.indexOf('confirm("') >= 0) {
                            return value.replace('confirm("', 'confirm("' + hrefAttr + ' ' + att + ' ');
                        }

                    }
                });
            });


            $.altConfirm();
        });

I have updated your fiddle so that it now works:

http://jsfiddle/k5uDw/8/

I added an id to your button and made a copy with a different id. I then passed the anchor object to the function by adding this in the parameters:

<a href="#" onclick="return confirm('Are you sure?', this)" id="clicky2">Or me</a>

Then, when you have the javascript object, you can get any attributes from it to find out which link triggered it.

button.getAttribute('id')

I also added the following code to fix a bug where it would create multiple events on click of the ok button. You need to remove previous "on" instances before adding a new one.

$(".btn-primary").off('click');

If you want to redirect it to a new link, then replace this code for confirm button

<button type="button" class="btn btn-primary">Ok</button>

with an anchor tag, like this one

<a href="https://www.google.co.in" target="_top" class="btn btn-primary">Ok</a>

I have updated your fiddle. Take a look http://jsfiddle/k5uDw/4/

Let me know if this is what you want.