A simple example of a pop-up-layer effect using JavaScript _javascript tips

Statement

Reading this article requires a certain amount of HTML, CSS, and JavaScript basics

Design

The idea of the pop-up layer effect is very simple: hide the content to be displayed first, and then display the hidden content after triggering certain conditions (such as clicking the button).

Realize

<! DOCTYPE html>  

The display effect is as follows:

But we can note that after the pop-up hidden content, we can still enter the Baidu page through the link. To prevent this from happening, we can provide a mask layer to cover all the original page contents. The code is as follows:

<! DOCTYPE html>  

This is the next Test effect, as shown in the following figure:

Summarize

The above content is simple to implement the pop-up layer effect, but by adding more code can also be based on the implementation of more complex features.

Above the use of JavaScript to achieve the pop-up effect of a simple example is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.