时间戳

首页 > 解决方案 > 微调器显示在模式的中心而不是网页

html - 微调器显示在模式的中心而不是网页

问题描述

我有一个引导模态，在模态中我有一个按钮，单击它会显示微调器。微调器不是以网页为中心，而是以模式为中心，即如果我向上滚动模式，微调器也会在上方。无论模态框的位置如何，我都希望我的微调器位于视图的中心。

我的微调器 CSS 如下 -

.spinner-overlay {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(58, 58, 58, 0.69);
    z-index: 10000;
}
.spinner-align {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spin .75s linear infinite;
    animation: spin .75s linear infinite;
}

我在我的视图页面中放置了一个 div，如下所示 -

<div class="spinner-overlay" style="display: none;position:fixed;">
    <div class="spinner-align">
        <div class="d-flex justify-content-center text-center">
            <div class="spinner-border text-light" style="width: 3rem; height: 3rem;" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
</div>

标签： htmlcssbootstrap-4bootstrap-modal

解决方案

在您的课程中尝试以下 CSS .spinner-overlay：

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    pointer-events: none;
}

这将使其全屏显示（微调器将根据视口居中）并且还允许用户单击“通过”它。

推荐阅读