How to pop up text with the effect of loading in a mask layer
This article mainly explains "how to pop up a mask layer with loading effect of the text", the content of the explanation in the article is simple and clear, easy to learn and understand, now please follow the editor's train of thought slowly in depth, together to study and learn "how to pop up a mask layer with loading effect of the text" bar!
Achieve:
The code is as follows:
Mask layer
# cover {
Display:none
Position:fixed
Z-index:1
Top:0
Left:0
Width:100%
Height:100%
Background:rgba (0,0,0,0.44)
}
# coverShow {
Display:none
Position:fixed
Z-index:2
Top:50%
Left:50%
Border:1px solid # 127386
Width:300px
Height:100px
Margin-left:-150px
Margin-top:-150px
Background:#127386
}
Function clickfunc ()
{
Alert ("clicked, cover the previous' test 'button is working")
}
Function coverit ()
{
Var cover = document.getElementById ("cover")
Var covershow = document.getElementById ("coverShow")
Cover.style.display = 'block'
Covershow.style.display = 'block'
Alert ("already covered, the 'test' button is no longer working")
}
Loading, please wait a moment.
Here loads a gif whose img src is dynamic
This is the content.
All the content is covered by cover.
Two mask layer
The first mask layer cover is to cover the entire body, width=100%,height=100%.
The second mask layer, coverShow, is centered and can be loaded with img elements.
Thank you for your reading, the above is the content of "how to pop up a mask layer with the loading effect of the text", after the study of this article, I believe you have a deeper understanding of how to achieve the pop-up of a mask layer with loading effect of the text, the specific use of the need for practice to verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
