在引导模态窗口之外选择下拉菜单选项会导致模态关闭

问题描述

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

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

里面有三个selectized的<select>。如果需要，我可以发布此代码，但我认为它不相关。

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

在这种情况下，有什么方法可以防止click事件关闭模式吗？

编辑：这是当我单击一个<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,layerY: 370 }

解决方法

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

Set

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

,

我想建议使用属性值为“静态”的数据背景和值为“假”的数据键盘。

这里是link！

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

,

您应该执行的操作是将select放置在div中，在该div中应用class =“ d-flex bg-transparent”，此外，您必须在div中使用较高的z-index，以使其与模式重叠并且必须操纵div的高度和宽度，以使其充满点击的整个空间。

类似的东西：

<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必须在它的中间。 您必须自己定义宽度和高度。

,

在这种情况下，有什么方法可以防止click事件关闭模式吗？

我检查了您的code，发现modal仅在每次选择相同选项时才关闭。示例：

1. 选择“ Thing 7”，然后选择“ Thing 7”->模式已关闭（出现问题）
2. 选择“ Thing 7”，然后选择“ Thing 8”->模态未关闭

我发现原因是：

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

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

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

• 在refreshOptions中添加onDropdownClose将重新创建DOM元素，并且click事件被取消。