在 bootstrap 模态 window 之外选择下拉选择会导致模态关闭

Question

这是我用来 select 任务的非常简单的模式 window。

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

里面有3个<select>就是selectized。如果需要，我可以 post 此代码，但我认为它不相关。

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

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

编辑：这是我在点击 <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”时将模式设置为静态，并在单击 select 或失去焦点时将其更改回。

$("#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。

Answer 2

我建议使用值为“static”的属性 data-backdrop 和值为“false”的 data-keyboard。

这是 link!

  [1]: https://jsfiddle.net/owmfj98s/

Answer 3

你应该做的是将 select 放在 div 中，因为 div 你应用 class="d-flex bg-transparent"，此外，您必须在 div 中使用高 z-index，以便它与模态重叠，并且必须操纵 div 的高度和宽度，以便它填充整个 space 哪里会有点击。

类似于：

<div class="row d-flex  bd-highlight">
    <div class="flex-fill bg-transparent justify-content-around" style="z-index:9999; width:auto; height:auto;">
    <select class="form-control bg-white">
    <option>test--test<option>
    <option>test--test<option>
    <option>test--test<option>
    <option>test--test<option>
    </select></div>

 <div class="flex-fill bg-transparent justify-content-around" style="z-index:9999; width:auto; height:auto;">
    <select class="form-control bg-white">
    <option>test--test<option>
    <option>test--test<option>
    <option>test--test<option>
    <option>test--test<option>
    </select></div>
 <div class="flex-fill bg-transparent justify-content-around" style="z-index:9999; widht:auto; height:auto;">
    <select class="form-control bg-white">
    <option>test--test<option>
    <option>test--test<option>
    <option>test--test<option>
    <option>test--test<option>
    </select></div>
</div>

你需要一个父元素，它不一定是 div，但 select 必须在它的中间。您必须自己定义宽度和高度。

Answer 4

Is there any way to prevent the click event from closing the modal in this circumstance?

我检查了你的code，发现modal只有在每次select相同的选项时才会关闭。示例：

Select "Thing 7", then "Thing 7" --> Modal is closed (problem happend)
Select“事物 7”，然后 select“事物 8”--> 模态未关闭

我发现原因是：

当 select 相同的“东西”时：Selectize 只需关闭列表（隐藏 DOM 元素）。动作顺序如下：
1. mousedown: 事件在列表中的元素上触发
2. Selectize 关闭隐藏列表
3. mouseup：事件在“.modal.face”元素（位于鼠标下方的元素）上触发参考 click event 文档，click 事件在“.modal.face”元素上触发并导致关闭模态
当select不同的“事物”时：在mousedown事件中，Selectizere-create列表（再次销毁并创建DOM对象） .因此，mousedown 事件的 target 被销毁，click 事件未被触发。

“在模态之外单击将导致模态关闭”是“模态”的默认行为。因此，修复它可能需要一些我不推荐的技巧。但是，如果您仍然想修复它，您可以按照以下步骤操作：

$(document).ready(function() {
    $("#select").selectize({
        valueField: 'id',
        labelField: 'val',
        searchField: 'val',
        create: false,
        maxItems: 1,
        onDropdownClose: function(dd) {  // <-- Add this
            this.refreshOptions(false);
        }
    });
    
    ...

在 onDropdownClose 中添加 refreshOptions 将 re-create DOM 元素和 click 事件被取消。

在 bootstrap 模态 window 之外选择下拉选择会导致模态关闭

Selectize dropdown selection outside of bootstrap modal window causes the modal to close

javascript

html

bootstrap-4

selectize.js