Select2 with AJAX显示在模态后面
Select2 with AJAX appears behind modal
我在模态中使用Select2,但它工作不太好,正如您在这里看到的:https://gyazo.com/a1f4eb91c7d6d8a3730bfb3ca610cde6
结果出现在模态后面。我该怎么解决这个问题?我读过模拟程序的帖子,但都在谈论删除tabindex,这是我的代码中没有的东西,所以我不知道如何修复它
<div class="remodal shadow" data-remodal-id="keuze" data-remodal-options="closeOnOutsideClick: false">
<button data-remodal-action="close" class="remodal-close"></button>
<div class="panel-header">Kies uw type logboek</div>
<div class="modal-body">
<select id="select" class="searchselectstyle select2"></select>
<button data-remodal-action="cancel" class="remodal-cancel mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect send">Aanmaken</button>
</div>
</div>
<script type="text/javascript">
token = '{{csrf_token()}}';
$(document).ready(function() {
$('#select').select2({
ajax: {
type: "POST",
url: "ajax/getlogtypes",
dataType: 'json',
data: function (params) {
return {
q: params.term, // search term
page: params.page,
'_token' : token
};
},
escapeMarkup: function (markup) {
return markup;
}, // let our custom formatter work
minimumInputLength: 1
}
});
});
</script>
按照Rory McCrossan的建议检查DOM后,我发现Select2生成的span
元素的z索引较低。我通过在代码中添加以下内容来修复它:
.select2-container{
z-index:100000;
}
问题与select2的父级有关。创建select2时,它的父对象是html主体(而不是模态)。解决方案是如下实例化select2:
$('.modal .select2').select2({
dropdownParent: $('.modal')
});
有关详细信息,请参阅此处:[https://select2.org/troubleshooting/common-problems]
上面的解决方案在我的情况下无法工作。但我通过添加下面的css解决了这个问题:.select2-drop {z-index: 99999;}
相关文章:
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- bootstrap消除模态并显示另一个模态
- React.js中显示了模态时如何执行某些操作
- 在页面上显示超过 1 个的模态框
- 如何在单击/接受/确认按钮后不再显示模态
- 如何在模态助推器中显示计算结果(JS)
- 如何将一个模态放在一边-显示其他模态(像..这样的向导)
- 限制字符串中显示的字符数,但在没有php的情况下以模态显示同一字符串中的所有字符
- 如何从url中显示模态内部的信息
- 在下拉列表选择中显示模态
- 带有黑色禁用背景的引导模态显示
- NgAnimate - 由于 NGAnimate,我的模态显示隐藏不起作用
- 反应/reux + 引导,使组件的模态显示唯一
- 在模态显示后在jquery中调用相同的函数
- Bootstrap:使用模态显示动态数据时出现问题
- 数据表后面的模态显示
- 在模态显示之前执行一个脚本标签
- 当模态显示时添加模糊类,当模态隐藏时删除
- 如何获得"这个“;背景图像's的url使用“$event.target”;以离子模态显示