Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.