js Implementation of bootstrap like Modal Box Animation

Developed on the pc side, modal box is a very common plug-in. The previous third-party plug-ins, such as bootstrap and jQuery modal box plug-ins, have recently used elementUI. However, it will be found that the animation effects are similar, so how to achieve such an animation effect?

Composition of modal frame

We can easily see the structure of a common modal box, a mask layer and a content area. The content area is mainly a header (including a title and a close button) and an body section (body often has confirmation and cancel buttons).

Layout

1. The background should be full screen, and if the page scrolls, it cannot scroll when the modal box pops up;
2. The content area should be displayed horizontally and centrally. As for the vertical direction, look at the design;
3. The modal box appears gradually and slides down from the top;

Realization

The mask uses the outermost element to fill the full screen (position: fixed;) And set the background color opacity (rgba (0, 0, 0, 0.5)).
There are many ways to center horizontally, which is used here

margin:30px auto;

This paper focuses on the realization of modal frame animation

As for gradual display, use opacity is OK, and slide down from the top with translate is also easy to achieve. So, it's easy to do, just change classname.
html

<input type="button" value="click" id="btn">
<div class="modal" id="modal">
  <div class="dialog">
    <header class="dialog-header">
      <h3>this is dialog title</h3>
      <span id="close"> × </span>
    </header>
    <div class="dialog-content">
      this is dialog content
     </div>
   </div>
</div>

style

.modal{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:rgba(0,0,0,0.5);
    display:none;
    z-index:1050;
    opacity:0;
    transition: all .5s ease-out 0s;
  }
  .dialog{
    width:500px;
    height:300px;
    position:relative;
    box-shadow:0 5px 15px rgba(0,0,0,.5);
    border-radius:10px;
    background-color:#fff;
    margin:30px auto;
    transform: translate(0,-40%);
    -webkit-transform: translate(0,-40%);
    transition: all .5s ease-out 0s;
  }
  .dialog-header{
    box-sizing:border-box;
    border-bottom:1px solid #ccc;
  }
  .dialog-header h3,.dialog-header span{
    display:inline-block;
  }
  .dialog-header span{
    float:right;
    margin-right:10px;
    overflow: hidden;
    line-height:58px;
    cursor:default;
    font-size:18px;
  }
  .in{
    opacity: 1;
  }
  .in .dialog{
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
  }

js

var oBtn = document.getElementById("btn");
var oModal = document.getElementById("modal");
var oClose = document.getElementById("close");
oBtn.addEventListener("click", function(){
  oModal.style.display = "block";
  oModal.className = "modal in";
});
oClose.addEventListener("click", function(){
  oModal.style.display = "none";
  oModal.className = "modal";
});

Does it look easy after running, eh? It doesn't have the animation effect we want to see. Why? Didn't we add animation when we clicked the button?

In fact, if you think about it carefully, when you click the button to change classname, you add all the elements display and animation attributes. When the modal box is displayed, the animation is completed, just like opening an html page. The css attributes of page elements all play a role when the page is rendered. It is effective when we directly trigger the animation of an element that has been displayed on the page. So we need to separate element display from animation.

Here I do an asynchronous operation (setTimeout).

  oModal.style.display = "block";
  var timer = setTimeout(function(){
    oModal.className = "modal in";
    clearTimeout(timer);
  },0);

After the element is displayed, animate it, so that we can achieve the desired animation effect.
All codes are on https://github.com/Stevenzwzhai/plugs/tree/master/dialog. There are many commonly used plug-ins of js under this project. Welcome to praise.