如何使表单中的弹出窗口出现在背景模糊后面？

Question

我制作了一个警报弹出窗口，当表单中的用户输入无效时，会出现该警报弹出窗口。 我将背景模糊的 z 索引设置为 10000（整个程序中最高的），但会自动弹出“请在电子邮件地址中包含‘@’”表单。仍然高于它。 有办法解决吗？

<div class="modal" id="myModal">
        <p id="modal-content"></p>
        <button onclick="closeModal()">OK</button>
    </div>

    <div class="modal-background" id="modalBackground"></div>

.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 100000;
}

.modal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 10000;
    backdrop-filter: blur(5px);
}

Answer 1

在您检查的验证中，我会尝试删除对输入的焦点，或者可能修改 CSS 中的默认验证气泡。

/* The entire area of the popup including area outside the bubble shape */
 ::-webkit-validation-bubble{}
/* Portion above the bubble behind top arrow */
 ::-webkit-validation-bubble-arrow-clipper{}
/* The arrow at the top of the bubble */
 ::-webkit-validation-bubble-arrow{}
/* The area containing the validation message */
 ::-webkit-validation-bubble-message{}