How to implement pop-up layer in javascript

Javascript method to implement a pop-up layer: 1. Create an HTML sample file; 2. Hide the content to be displayed first, and after the click condition is triggered, display the originally hidden content, with code such as "document. getElementById("open").onclick = function(e){...}"; 3. Provide a mask layer to cover all the original page content.

The operating environment of this tutorial: Windows 10 system, javascript version 1.8.5, Dell G3 computer.

How to implement pop-up layer in javascript?

Use JAVASCRIPT to achieve the pop-up layer effect

Statement

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

Design

The idea of ​​​​implementing the pop-up layer effect is very simple: hide the content to be displayed first, and after triggering a certain condition (such as clicking a button), Reveal previously hidden content.

Implementation

    
    



百度一下
打开弹出层
         
    
这里是弹出层内容
    关闭弹出层

The display effect is as follows:

But we can notice that after popping up the hidden content, we can still enter the Baidu page through the link. In order to prevent this from happening, we can provide a mask layer to cover all the original page content. The code is as follows:

    
    



百度一下
打开弹出层
       
    
         
   　　
这里是弹出层内容
    　 关闭弹出层
　　

This is to test the effect again, as shown below:

Summary

The above content The pop-up layer effect is simply implemented, but more complex functions can be implemented on this basis by adding more code.

Recommended learning: "JavaScript Video Tutorial"

The above is the detailed content of How to implement pop-up layer in javascript. For more information, please follow other related articles on the PHP Chinese website!