html - 如何在加载程序显示期间禁用背景

Question

当用户点击按钮时，我会显示加载器。以下是加载器类

.loader-box{ background:rgba(0,0,0,0.8); position:fixed; bottom:0; left:0; top:0; width:100%; height:100%; z-index:100;}

我的问题是当加载程序显示时，用户可以使用选项卡移动光标并单击提交，如何防止这种情况发生？这可能使用任何 css 属性还是我需要做任何其他事情？

Answer 1

我正在发布一个示例来帮助您。使用 tab 键时，我们可以使用“tabindex”属性来聚焦元素。

<div class="loader-box">
    <div class="formwrapper">
        <input type="text" name="name" tabindex="01" placeholder="text 01">
        <input type="text" name="name" tabindex="02" placeholder="text 02">
        <input type="text" name="name" tabindex="03" placeholder="text 03">
        <input type="button" name="button" tabindex="04" value="Submit">
    </div>
</div>

<style type="text/css">
    .loader-box { 
        background:rgba(0,0,0,0.8); 
        position:fixed; 
        bottom:0; 
        left:0; 
        top:0; 
        width:100%; 
        height:100%; 
        z-index:100;
    }
    .formwrapper {
        font-family: arial;
        width: 200px;
        height: 200px;
        margin:auto;
        position:fixed; 
        bottom:0; 
        left:0; 
        top:0;
        right: 0; 
        text-align: center;
        color: #000;
        background: #c1c1c1;
        border-radius: 10px;
    }
    input {
        padding: 5px;
        width: 80%;
        margin:8px 10px;
    }
</style>