多个模式的引导模式键盘和背景属性问题答案

【问题标题】：Bootstrap Modal keyboard & backdrop property issue for multiple modals多个模式的引导模式键盘和背景属性问题
【发布时间】：2017-05-17 11:21:00
【问题描述】：

我有多个模式，但键盘：false 属性在某些情况下不起作用：

第一个事件打开类型模型：

$('.charts').click(function () {
    $('#ModalVTypes').modal({ backdrop: 'static', keyboard: false, show: true });
});

第二个事件打开矩阵或图表模式并隐藏类型模型：

$('.glist a').click(function () {
    $('.modal').modal('hide');
    if (Type == 1) {
        $('#ModalMatrics').modal({ backdrop: 'static', keyboard: false, show: true });
    } else {
        $('#ModalChart').modal({ backdrop: 'static', keyboard: false, show: true });

    }
});

如果我使用单一模式，它的工作正常。谢谢

【问题讨论】：

那是一个 id #ModalVTypes...你怎么有多个模态？您是否有多个具有相同 ID 的元素？如果是这样，那就是你的问题，使用一个类
否，同一页面上的不同模式具有不同的 ID
好的，那么您需要显示更多代码，一行并没有真正的帮助-您可以创建一个小提琴或引导程序并显示它不起作用吗？
@DarrenSweeney 代码已添加

标签： javascript jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

尝试在 HTML div 模态元素中给出如下所示

 <div class="modal-open">
        <div class="modal fade" id="ModalVTypes" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Test modal</h4>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">

                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

【讨论】：

【解决方案2】：

解决方案一直很喜欢：

模式隐藏功能的问题。

$('.modal').modal('hide'); //Create issue because it'll reset all properties

将其替换为以下内容：

$('Model_ID').modal({ backdrop: 'static', keyboard: false, show: false});

【讨论】：