如何解决在引导模态窗口之外选择下拉菜单选项会导致模态关闭
这是我用来选择任务的非常简单的模式窗口。
<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>
。如果需要,我可以发布此代码,但我认为它不相关。
基本上,问题是在某些情况下(我想要的)下拉列表超出了模态窗口底部的范围,如果单击底部下方的选项,则会关闭模态。显然,我可以使模式静态化,但这不是我想要的功能。
编辑:这是当我单击一个<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
仅在每次选择相同选项时才关闭。示例:
- 选择“ Thing 7”,然后选择“ Thing 7”->模式已关闭(出现问题)
- 选择“ Thing 7”,然后选择“ Thing 8”->模态未关闭
我发现原因是:
- 选择相同的“事物”时:
Selectize
仅需关闭列表(隐藏DOM元素)。动作顺序如下:-
mousedown
:事件在列表中的元素上触发 -
Selectize
关闭隐藏列表 -
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
事件被取消。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。