在Bootstrap模态窗口外选择Selectize下拉选项会导致模态窗口关闭。

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> 是 selectized 的。如果需要，我可以发布这段代码，但我认为它不相关。

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

有没有办法在这种情况下防止点击事件关闭模态？

编辑：这是我点击一个这样的 <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 }

- Alex Coats

---

为下拉菜单添加一个点击处理程序，调用 stopPropagation()，以便点击事件不会冒泡到 DOM 的其余部分。 - kmoser

evt.stopPropagation(); evt.preventDefault(); });``` 这是我尝试过的，但没有用。 - Alex Coats

我创建了一个纯净的Bootstrap模态框，其中包含<select>选项，这些选项会在模态框下方延伸。当我点击任何一个延伸到模态框下面的选项时，它不会关闭模态框。我猜测您要么有JS错误，要么是selectize.js的症状。您能发布一个最小化、可重现的示例吗？ - kmoser

你能否提供一个最小工作示例？就像 jsfiddle 一样。 - Always Helping

我已经做了，请看我的上面的评论。 - Alex Coats

Answer 1

这可能不是一个完美的解决方案。但是当你打开“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。

- Hainan Zhao

---

我可以使用这样的解决方案，但是这种特定方法不起作用。在关闭事件触发之前，背景被设置为非静态，因此无论如何都会关闭它。这确实可以防止在选项菜单打开时在外部单击关闭，但这不是我关心的问题。 - Alex Coats

@AlexCoats 你觉得使用 'focusout' 事件将 'backdrop' 设置回 true 怎么样？ - Hainan Zhao

选择框上没有“focusout”事件，但我尝试使用“blur”，它也不起作用。这是更新后的jsfiddle链接：https://jsfiddle.net/28mrne0k/ - Alex Coats

我接受这个答案，因为正如你所说，这个解决方案确实适用于Chrome。不幸的是，我正在使用Firefox，但似乎没有比这更好的选择了。 - Alex Coats

Answer 2

在这种情况下，有没有办法防止点击事件关闭模态框？

我查看了您的代码，发现只有在每次选择相同选项时才会关闭模态框。例如：

1. 选择“Thing 7”，然后再选择“Thing 7”--> 模态框关闭（出现问题）
2. 选择“Thing 7”，然后选择“Thing 8”--> 模态框不会关闭

我发现原因是：

当选择相同的“thing”时：Selectize只关闭列表（隐藏DOM元素）。行动顺序如下：

1. mousedown：事件在列表中的元素上触发
2. Selectize关闭并隐藏列表
3. mouseup：事件在“.modal.face”元素（鼠标下方的元素）上触发， 请参考click event文档，click事件在“.modal.face”元素上触发并导致关闭模态

当选择不同的“thing”时，在mousedown事件中，Selectize重新创建列表（销毁并再次创建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将重新创建DOM元素，click事件被取消。

- binhgreat

---

这不是正确的。模态窗口关闭是因为单击事件在模态窗口之外的项目上。这很容易复现。 - Alex Coats

Answer 3

我建议使用属性data-backdrop和值"static"以及data-keyboard和值"false"。

这里有一个链接！

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

- Pankaj Salunkhe

---

我之前说过，虽然这是一个选项，但它不是我想要的功能。 - Alex Coats

Answer 4

你需要将选择器放置在一个div中，在该div中应用class="d-flex bg-transparent"，此外，您必须在div中使用高z-index以使其覆盖模态框，并且必须操纵div的高度和宽度，以填充单击区域的整个空间。

类似于：

```html

```

<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，但选择器必须位于其中间。 您必须自己定义宽度和高度。

- Macedo_Montalvão