JS implementation class bootstrap modal frame animation

In the PC-side development, the modal frame is a very commonly used plugin, the previous third-party plug-in, such as Bootstrap, jQuery’s modal frame, recently used Elementui. But it will find that in fact, the animation effect is almost, so how to achieve such an animation effect?


The structure of common modal frames We can easily see that a mask layer, and content area. The content area is primarily headed (including headings, closing buttons) and body part (often confirmed and canceled in Body).

1. The background is full of full screen, and if the page is scrolling, it is impossible to scroll when the modal box is popped;

2. Content The area is in the horizontal display, as for the vertical direction design;

3. The appearance of the modal frame is gradually displayed, and slid down from the top;


Mask Use the outermost element of the entire entire screen (Position: fixed;) and set the background color opacity (RGBA (0, 0, 0, 0.5)).

There are many ways in horizontal housing, here

Margin: 30px auto;

With regard to the realization of modal frame animation

About gradually displaying Opacity, it is easy to implement from the top. It seems that it is easy to do, just need to change ClassName.

   this is Dialog ContenT   
var obtn = document.GtelementByid ( “btn”); var omodal = document.getlementByid (“modal”); var oclose = document.getlementByid (“close”); Obtn.AddeventListener (“click”, function () {omodal.style.display = “block” omodal.classname = “modal in”;}); Oclose.AddeventListener (“click”, function () {omodal.style.display = “none”; omodal.classname = “modal”;});

Is it easy to look, after running, 诶? Didn’t we want to see the animation effect, why? Don’t you add animation when we click on the button?
   In fact, think about it, when you click the button to change the classname, it is a bit plus the elements Display and the animation attributes.When the modal frame is displayed, the animation also completed, just like opening an HTML page, the CSS attribute of the page element has played a role in the page rendering. And we are valid when we trigger an elements that have been displayed directly. So we need to make the elements display and animation. 
Here I have made a asynchronous operation (SetTimeout).

omodal.style.display = “block”; var time = settimeout (function () {omodal.classname = “modal in”; cleArtimeout (Timer);}, 0);

 The element is displayed to add a painting effect to it, so that we can achieve the animation effect we expect.  All code in github https://github.com/stevenzwzhai/plugs/tree/master/dialog, there are many JS common plugins under this project, welcome to praise.  
The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment