扩展引导 jQuery 模式答案

【问题标题】：Extending bootstrap jQuery modal扩展引导 jQuery 模式
【发布时间】：2012-10-01 21:28:40
【问题描述】：

我想在 Bootstrap/jQuery 中扩展 $.fn.modal 以便我的扩展版本在通过传递额外选项初始化模态之前“做事”。我试过这个，就像我做过几次扩展 jQuery 原型一样：

var modal = $.fn.modal;

$.fn.modal = function() {
    this.each(function() {
        // do stuff
    });
    modal.apply(this, arguments);
}

$('#modal').modal(); // fails

上面的例子不起作用，尽管同样的模式适用于许多其他非引导 jQuery 原型。

这是一个演示它的小提琴：http://jsfiddle.net/eTWSb/（只需评论覆盖的内容以查看它的工作原理）。

我的印象是，当您想要添加自定义功能时，克隆一个函数然后将其称为“超级”是一个可行的选择。

有什么建议吗？

【问题讨论】：

“不工作” 你的代码没有效果吗？还是模态完全停止工作？你的代码到底是做什么的？是不是可能会被模态代码覆盖？
不起作用，因为模态不再初始化：jsfiddle.net/eTWSb
可以编辑原始的bootstrap-modal.js 吗？
这很奇怪。我不知道为什么那行不通。
@PetrMarek 不，我希望将其放入任何引导项目中。就像引导模式的类固醇一样。

标签： javascript jquery twitter-bootstrap modal-dialog extend

【解决方案1】：

好的，我想通了。在覆盖$.fn.modal 时，我还删除了引导程序放置在$.fn.modal.defaults 中的默认选项（为什么？）。

所以当我扩展它时，我失去了实际显示模态的默认show: true 选项...

这解决了它（但构造函数会丢失，除非你也复制它）：

var modal = $.fn.modal,
    defaults = $.extend({}, $.fn.modal.defaults);

$.fn.modal = function(options) {
    options = $.extend( defaults, options );
    this.each(function() {
        // do stuff
    });
    return modal.call( this, options );
};

【讨论】：

【解决方案2】：

David 提供的解决方案是正确的，但要做到这一点，你必须确保 jQuery 已加载，如 here 所述，所以最终解决方案：

window.onload = function() {
    if (window.jQuery) {  
        //modal extension
        var modal = $.fn.modal,
        defaults = $.extend({}, $.fn.modal.defaults);
        $.fn.modal = function(options) {
        options = $.extend( defaults, options );
        this.each(function() {
          // do stuff
        });
        return modal.call( this, options );
        };
    }
}

【讨论】：