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

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

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

Answer 2

我想你想要实现这样的目标：

＆＃13;

   $('.overlay').show(400, function() {
      $(this).append($('.modal'));
      $('.modal').fadeIn(1000)
   });

＆＃13;

 .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;     
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay"></div>
<div class="modal">
   <div class="modal_title">My Title</div>
   <div class="modal_inner">
       My Modal Content
   </div>
</div>

＆＃13;

你应该使用callbaks让它像overlay一样连续工作 - ＆gt;模态。这种干扰与你的模态中的淡化有关 - 它在叠加出现的同时变化。它们重叠并获得动画，因此我们在动画时看到与页面渲染相关的一些奇怪的视觉效果。

黑色透明叠加在UI - CSS中有一些干扰

2 个答案: