在引导模式窗口之外选择下拉选择会导致模式关闭

Question

这是我用来选择任务的非常简单的模式窗口。

<div id="add_task_modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Lookup Task</h5>
            </div>
            <div class="modal-body">
                <select id="select_customer_name" placeholder="Select a customer..."></select>
                <select id="select_project_name" placeholder="Select a project..."></select>
                <select id="select_task_name" placeholder="Select a task..."></select>
            </div>
            <div class="modal-footer">
                <button id="submit_add_task" class="btn btn-primary">Add</button>
                <button class="btn btn-primary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<select>里面有3个s被选中。如果需要，我可以发布此代码，但我认为它不相关。

基本上问题是在某些情况下下拉菜单超出了模态窗口的底部（这就是我想要的），如果您单击底部下方的选项，它将关闭模态。显然我可以使模态静态，但这不是我想要的功能。

在这种情况下，有什么办法可以防止点击事件关闭模态？

编辑：这些是我点击其中一个时获得的两个点击事件<option>：

click { target: div#add_task_modal.modal.fade.show , buttons: 0, clientX: 1251, clientY: 370, layerX: 1251, layerY: 370 }

click { target: div#add_task_modal.modal.fade, buttons: 0, clientX: 1251, clientY: 370, layerX: 1251, layerY: 370 }

Answer 1

这可能不是一个干净的解决方案。但是，您可以在打开“选择”时将模式设置为静态，并在单击选择或失去焦点时将其更改回来。

$("#select_customer_name").on("focus", function(e) {
    modal.data('bs.modal')._config.backdrop = 'static';
});

$("#select_customer_name").on("blur", function(e) {
    modal.data('bs.modal')._config.backdrop = true;
});

注意：这适用于 Chrome，不适用于 Firefox。