Question

我在模式中使用Select2，但它工作不正常，你可以在这里看到：here

结果出现在模态背后。我怎样才能解决这个问题？我已经阅读了类似的帖子，但所有人都在谈论删除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>

Answer 1

在检查了Rory McCrossan建议的DOM之后，我发现Select2生成的span元素出现了较低的z-index。我通过在我的代码中添加以下内容来修复它：

.select2-container{
    z-index:100000;
}

Answer 2

上述解决方案在我的案例中无法奏效。但我通过添加下面的CSS来解决它：
.select2-drop {z-index: 99999;}

Answer 3

问题与select2的父项有关。创建select2时，其父级是html主体（而不是模式主体）。解决方法是实例化select2，如下所示：

$('.modal .select2').select2({
    dropdownParent: $('.modal')
});

有关更多信息，请参见此处：[https://select2.org/troubleshooting/common-problems]

带有AJAX的Select2出现在模态后面

3 个答案: