Question

我正在使用Bootstrap 3.x并使用模式显示＆＃34;您确定要这样做吗？＆＃34;取消和确认按钮的消息类型如下所示。

<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属性，但不确定如何在下面的隐藏事件处理程序中读取和调用此回调方法。任何提示/帮助解决这个问题都表示赞赏。

它不一定是这种方式，在模态关闭时启用回调机制的任何其他方式都应该是可接受的。

Answer 1

阅读http://getbootstrap.com/javascript/#modals-events和http://github.com/jschr/bootstrap-modal/issues/224后我确信e.relatedTarget不可用于隐藏/隐藏事件的开箱即用。所以我已经制定了以下机制，但不是很好，以解决这个问题。

我删除了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模式中提供关闭按钮的回调函数？

1 个答案: