关闭包含模式时关闭 Bootstrap 警报的最简单方法答案

【问题标题】：Simplest way to dismiss Bootstrap alerts when the containing modal is dismissed关闭包含模式时关闭 Bootstrap 警报的最简单方法
【发布时间】：2014-05-31 00:01:42
【问题描述】：

我正在使用 Bootstrap 3 在模态框内动态显示警报。如果模态框被解除，我希望警报被解除。因此，如果我显示错误警报，用户关闭模态框以修复他们的错误，然后将模态框重新启动，当模态框返回时，错误警报将不存在。

我知道我可以这样手动设置：

$('.modal').on('hidden.bs.modal', function (e) {
    $('.alert', $(this)).alert('close');
});

但我想知道是否有一种更简单的方法，也许是使用 data- 属性，让模式在隐藏时关闭其中的所有警报。而不是仅仅在任何使用模式的页面上植入那段代码。

这是一个带有警报的典型模式：

<div id="modalNew" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Create New Thing</h4>
            </div>
            <div class="modal-body">
                <form> ... </form>
                <div class="alertbox">
                    <div class="alert alert-danger alert-dismissable">
                       <button type="button" class="close" data-dismiss="alert">&times;</button>
                       <strong>Error!</strong> You did it wrong.
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="SubmitForm()">Create</button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

据我所知，Bootstrap 不允许多个 data-dismiss 值。即使您尝试将取消按钮的data-dismiss 值设置为alert，它也会出于某种原因隐藏模态页脚。

我会说在每个页面上使用你的几行 jQuery 行是某种疯狂黑客之外的唯一选择。

【讨论】：