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

我创建了一个自定义的模式弹出框。为了显示或隐藏模式框，我使用了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>

现在，它显示在下面的输出中。



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

最佳答案

这绝对不是由您的代码引起的，而是由浏览器引起的。也尝试使用其他浏览器进行确认。

不幸的是，您无能为力。您可以等待他们修复它，也可以尝试另一种方法，而这种方法可能不会弄乱渲染效果，但是正如我所见，这是唯一的选择。