用 Twitter Bootstrap 的模态替换标准的 javascript 确认 - 谁触发了它? [英] Replace standard javascript confirm with Twitter Bootstrap's modal - who triggered it?

问题描述

我正在尝试用 twitter 引导模式窗口替换标准的 javascript 确认.一切几乎都在工作(模态与其确认文本一起显示)，但我一直在试图捕捉调用者的 href，我需要绑定确定"按钮.

这是我的代码(几乎可以工作的示例:http://jsfiddle.net/k5uDw/):

jQuery.altConfirm = 函数(选项){var box = '<div class="modalfade static" id="confirm" data-backdrop="static" tabindex="-1" role="dialog">';box += '
';box += '
';box +='
';box += '
';box += '<button type="button" class="btn btn-default" data-dismiss="modal">No</button>';box += '<button type="button" class="btn btn-primary">Ok</button>';框 += '</div>';框 += '</div>';框 += '</div>';框 += '</div>';$("body").append(box);window.confirm = function () {$(".modal-body").html( arguments[0].replace(/\n/, "<br/>") );$('.modal').modal();$(".btn-default").on('click', function() {$(this).modal('隐藏');});$(".btn-primary").on('click', function() {返回真；//这是我需要调用者的 HREF 的地方，//使其真正进行.//返回真，显然什么都不做.});};};$(document).ready(function() {$.altConfirm();});

有什么提示吗?请注意，我希望这是标准 javascript 确认的直接替代品，因此修改确认本身的调用方式是不可能的(如果此插件处于活动状态 -> 则显示模态，如果此插件未激活 -> 然后触发标准确认).

解决方案

我已经更新了您的小提琴，提供了一个即时重写代码的解决方案；如果您的代码是由框架生成的，并且您不能/不想更改编写它的框架的函数，那么这是一个有用的解决方案:

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

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

$(document).ready(function() {console.log('加载完成');jQuery.each($('body').find('a'), function(i, val) {var hrefAttr = ($(val).attr('href'));$(val).attr('href', '');$(val).attr('onClick', function(index, value) {如果(值！= 未定义){var att = '-';如果(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'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.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();
});

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'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.net/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();
        });

这篇关于用 Twitter Bootstrap 的模态替换标准的 javascript 确认 - 谁触发了它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！