解除包含模式时解除Bootstrap警报的最简单方法

时间:2014-05-30 14:56:07

标签: twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

我使用Bootstrap 3动态显示模态内的警报。如果模态被解除,我希望解除警报。因此,如果我显示错误警报,用户会解除修改错误的模态,然后重新启动模态,当模态返回时错误警报将不存在。

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

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

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

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

<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> 

1 个答案:

答案 0 :(得分:3)

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

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