<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } #div1{ position: fixed; width: 100%; top: 0; left: 0; height: 2000px; background-color: #b4b4b4; z-index: 1000; } #div2{ position: fixed; width: 100%; z-index: 1001; top: 0; left: 0; right: 0; bottom: 0; background-color: red; opacity: 0.1; } #div3{ height: 200px; width: 200px; background-color: blueviolet; position: absolute; top: 50%; left: 50%; z-index: 1002; margin-left: -100px; margin-top: -100px; } .hide{ display: none; } </style> </head> <body> <div > <input type="button" value="click" onclick="show()"> </div> <div ></div> <div > <input type="button" value="cancel" onclick="cancel()"> </div> <script> function show() { var ele=document.getElementsByClassName("div") for (var i=0;i<ele.length;i++){ ele[i].classList.remove("hide") } } function cancel() { var ele=document.getElementsByClassName("div") for (var i=0;i<ele.length;i++){ ele[i].classList.add("hide") } } </script> </body> </html>