如何在Bootstrap Modal上使用回调确认?

时间:2014-06-26 12:03:56

标签: jquery callback twitter-bootstrap-3

我实施Bootstrap Modal,如果用户点击确认,我需要返回true
目前我无法使用这样的数据属性:

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

我不熟悉回调,我想在用户点击确认时返回TRUE。有没有办法实现这个目标? Here is my fiddle

放入上下文; 我想删除一条记录。如果返回true,则继续删除。

$('#butt').click(function() {
    $('#content').portalDialogue({
        title : 'Hjelp',
        confirm: true,
        btnClose : 'Lukk',
        btnConfirm : 'OK',
        action: '#'
    });
});

(function ( $ ) {
    $.fn.portalDialogue = function(option,callback) {
        var self   = this;
        var title   = option.title || 'Melding';
        var confirm   = option.confirm || false;
        var btnClose   = option.btnClose || 'Lukk';
        var btnConfirm   = option.btnConfirm || 'Ok';

        // Title
        $('.modal-title').text(title);
        // Close button
        $('.btnClose').html(btnClose);
        // Confirm button
        $('.btnConfirm').html(btnConfirm);
        // Dialog text
        $('.modal-body').html($(self).html());

        //IS confirm?
        if (confirm) {
            $('.btn.default').addClass('btn-default');
            $('.btn.confirm').removeClass('hidden').addClass('btn-primary').click(function(callback){
                return callback(true);                
            });
        } else {
            $('.btn.default').addClass('btn-primary');
            $('.btn.confirm').addClass('hidden');
        }

        // Open dialogue
        $('.default-modal').modal('show');
    };
}( jQuery ));

1 个答案:

答案 0 :(得分:1)

基本思想是回调函数是对象。在这种情况下,您将它作为第二个参数传递给portalDialogue函数。在我的例子中,我将使用匿名函数作为回调。

在代码的第二部分中,我在click上绑定另一个匿名函数,调用使用任意参数传递的回调函数(在这种情况下,只是true)。

我改变了这些界限:

$('#butt').click(function() {
    $('#content').portalDialogue({
        title : 'Hjelp',
        confirm: true,
        btnClose : 'Lukk',
        btnConfirm : 'OK',
        action: '#'
    }, function(ret){ // <-- our callback
        alert(ret); // or whatever code you need
    });
});

....

$('.btn.confirm').removeClass('hidden').addClass('btn-primary').click(function(){
    return callback(true);                
});

http://jsfiddle.net/9KyL5/4/

有关回调的更多信息:https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks