用 Twitter Bootstrap 的模式替换标准的 javascript 确认 - 谁触发了它？

Question

我试图用twitter引导模态窗口取代标准javascript确认。一切都几乎工作(模态显示其确认文本)，但我卡住试图捕捉调用者href，我需要绑定"ok"按钮。

下面是我的代码(几乎工作的例子:http://jsfiddle.net/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();
});

提示吗?请注意，我希望这是一个drop-in替代标准javascript确认，所以修改确认本身的方式被称为它是不可能的(如果这个插件是活动的->然后模态显示，如果这个插件是不活动的->然后标准确认被触发)。

Answer 1

我已经更新了你的小提琴与一个解决方案，重写的代码在飞行;如果你的代码是由框架生成的，你不能或不想改变框架的函数，这是一个有用的解决方案:

http://jsfiddle.net/k5uDw/16/

在document ready()上，它查找标签，如果找到"确认"调用，则更新传递给它的参数，以便存储一些其他信息(链接到打开或当ok按在模态上时执行的操作);然后，覆盖标准confirm()的函数总是返回false(停止执行)，并处理当用户按下modal上的ok时必须做的事情:

$(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();
        });

Answer 2

我已经更新了你的小提琴，现在它可以工作了:

http://jsfiddle.net/k5uDw/8/

我给你的按钮添加了一个id，并复制了一个不同的id。然后，我通过在参数中添加this将锚点对象传递给函数:

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

然后，当你有了javascript对象，你可以从它得到任何属性来找出是哪个链接触发了它。

button.getAttribute('id')

我还添加了以下代码来修复单击ok按钮时会创建多个事件的错误。在添加新实例之前，您需要删除先前的"on"实例。

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

Answer 3

如果您想将其重定向到新链接，则替换此确认按钮

的代码

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

带有锚标记的

，就像下面这个

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

我更新了你的小提琴。看看http://jsfiddle.net/k5uDw/4/

如果这是你想要的，请告诉我。