javascript - 黑色透明覆盖在 UI - CSS 中有一些干扰

Question

我创建了一个自定义模式弹出框。为了显示或隐藏模式框，我使用了 JQuery 代码。下面是我的CSS样式代码和JQuery代码

CSS

    .overlay {
        position: fixed;
        background: #000;
        opacity: .8;
        height: 100%;
        width: 100%;
        display:none;
        z-index: 999
    }

 .modal {
     position: absolute;
    margin: 30px auto;  
    background: #fff;
    display:none;
    height: 200px; 
    width:600px;
    top: 60px;     
  }

JQuery 代码:

function showModal(){
   $('.overlay').show(); 
   $('.modal').fadeIn(100);
}

HTML 代码:

<div class="overlay"></div>
<div class="modal">
   <div class="modal_title">My Title</div>
   <div class="modal_inner">
       My Modal Content
   </div>
</div>

现在，它显示在输出下方。

我想从 UI 中消除这种干扰。但是需要知道它为什么会出现吗？我的代码错了吗？或者这个问题还有其他可能性吗？我该如何解决？

Answer 1

这肯定不是你的代码造成的，而是浏览器造成的。也可以尝试使用其他浏览器进行确认。

不幸的是，您无能为力。您可以等待他们修复它，或者您可以尝试一种不会搞砸渲染的不同方法，但在我看来，这些是唯一的选择。