如何为 Twitter bootstrap 模式中的关闭按钮提供回调函数？

Question

我正在使用 Bootstrap 3.x 并使用模态来显示 "Are you sure you wish to do this?" 类型的带有取消和确认按钮的消息，如下所示。

<div id="modal" class="modal fade" role="dialog" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Confirm Delete</h3>
            </div>
            <div class="modal-body">
                <p>Are you sure you wish to delete this item?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" data-dismisscallback="deleteCallback">Confirm</button>
            </div>
        </div>
    </div>
</div>

我也在处理下面的模态隐藏事件。

$('#modal').on('hidden.bs.modal', function () {
  //TODO: invoke callback method if provided
});

我在“确认”按钮上添加了额外的 data-dismisscallback 属性，但不确定如何在下面的隐藏事件处理程序中读取和调用此回调方法。任何 hint/help 解决此问题的人都表示赞赏。

不一定非要这样，任何其他方式都可以在模态关闭时启用回调机制。

Answer 1

看完http://getbootstrap.com/javascript/#modals-events and http://github.com/jschr/bootstrap-modal/issues/224 我确信 e.relatedTarget 不是开箱即用的 hide/hidden 事件。所以我制定了以下机制来解决这个问题。

我删除了 data-dismiss 属性，同时保留自定义属性 data-dismisscallback 以指定回调函数名称。

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button type="button" class="btn btn-primary" data-dismisswithcallback="myCallback">Confirm</button>
</div>

在全局事件处理程序中，我手动关闭模式并调用回调方法。

$("button[data-dismisscallback]").unbind("click").bind("click", function (e) {
    $(this).closest(".modal").hide();

    var callback = $(this).data("dismisscallback");
    if (callback) {
        var fn = window[callback];
        if (typeof fn === 'function') {
            fn();
        }
    }
});

如何为 Twitter bootstrap 模式中的关闭按钮提供回调函数？

How can I provide a callback function for dismiss buttons in a twitter bootstrap modal?

jquery

modal-dialog

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3