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

Question

I've created a custom modal popup box. To show or hide the modal box, I've used JQuery code. Below is my CSS style code and JQuery code

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 Code:

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

HTML Code:

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

Now, it's showing below output.

I want to remove this disturbance from UI. But need to know why it's appearing? Is my code wrong? or Is there any other possibilities of this issue? How can I solve it?

Answer 1

This is definitely not something caused by your code, but by the browser. Confirm by trying to use other browsers too.

There unfortunately isn't much you can do. You can wait for them to fix it, or you can try a different approach which happens to not screw up with the rendering, but those are the only options as I see it.

Answer 2

I suppose that you want to achieve something like this:

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

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

 <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>

You should use callbaks in order to make it work consecutively like overlay -> modal. That disturbance is related to fading in your modal - it is hapenning at the same time as the overlay appeares. They overlap and get animated so we see some weird visual effect related to page rendering while animating.