Question

我试图用twitter bootstrap模式窗口替换标准的javascript确认。一切都近乎工作（模式显示为其确认文本），但我试图抓住调用者href，我需要绑定＆＃34;确定＆＃34;按钮。

这是我的代码（几乎是工作示例：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();
});

任何提示？请注意，我希望这是标准javascript确认的替代品，因此修改确认本身的方式是不可能的（如果此插件处于活动状态 - >然后显示模式，如果这样插件未激活 - ＆gt;然后触发标准确认。）

Answer 1

我已经用一种解决方案更新了您的小提琴，该解决方案可以快速重写代码;如果您的代码是由框架生成的，并且您不能/不想更改编写它的框架函数，那么这个有用的解决方案是：

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

在文件就绪（）上，它查找标签，如果找到“确认”调用，则更新传递给它的参数，以便存储一些其他信息（链接到打开或按下确定时要执行的操作）模态）; 那么覆盖标准confirm（）的函数，总是返回false（停止执行）并处理当用户在模态上按下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按钮时创建多个事件。你需要删除之前的＆＃34; on＆＃34;添加新实例之前的实例。

$(".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/

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

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

3 个答案: