模态出现在旁边的模态背景

问题描述 投票:0回答:1

我是 html 的新手,正在尝试实现引导模式对话框,但模式背景(不确定确切名称)出现在它的左侧,我该如何解决这个问题

我已经尝试过这些:

  1. z-指数:1;
  2. 数据背景=“假”
  3. 添加到身体
$('#exampleModalLong').appendTo($('body'));

这是我的模态:

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog modal-dialog-centered" role="document" id="modalDocument">
        <div class="modal-content" id="modalContent">
            <div class="modal-header" id="modalHeader">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

我用模态配置的 CSS :

#exampleModalLong {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
        width: 75%;
        height: 75%;
        background: aqua;
        z-index: 1;
    }

显示模态的方法:

function displayModel(message) {
            $('#exampleModalLong').modal('show')
        }

请帮我解决这个问题

javascript html css django bootstrap-modal
1个回答
0
投票

由于您为模态设置的 CSS,模态背景似乎出现在模态的左侧。

您可以尝试将模态框固定在视口内,而不是绝对定位模态框。您可以尝试使用以下 CSS 作为模态:

#exampleModalLong {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
}

这会将模式定位在视口的中心并将

z-index
设置为比背景更高的值。这应该确保背景在模态后面。

此外,请确保您已在 HTML 代码中正确包含 Bootstrap CSS 和 JavaScript 文件。

如果这对您有用,请接受答案。

© www.soinside.com 2019 - 2024. All rights reserved.