- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .back{
- background-color: rebeccapurple;
- height: 2000px;
- }
- .shade{
- position: fixed;
- top: 0;
- bottom: 0;
- left:0;
- right: 0;
- background-color: coral;
- opacity: 0.4;
- }
- .hide{
- display: none;
- }
- .models{
- position: fixed;
- top: 50%;
- left: 50%;
- margin-left: -100px;
- margin-top: -100px;
- height: 200px;
- width: 200px;
- background-color: gold;
- }
- </style>
- </head>
- <body>
- <div class="back">
- <input id="ID1" type="button" value="click" onclick="action('show')">
- </div>
- <div class="shade hide"></div>
- <div class="models hide">
- <input id="ID2" type="button" value="cancel" onclick="action('hide')">
- </div>
- <script>
- function action(act){
- var ele=document.getElementsByClassName("shade")[0];
- var ele2=document.getElementsByClassName("models")[0];
- if(act=="show"){
- ele.classList.remove("hide");
- ele2.classList.remove("hide");
- }else {
- ele.classList.add("hide");
- ele2.classList.add("hide");
- }
- }
- </script>
- </body>
- </html>
来源: https://www.cnblogs.com/horror/p/9373950.html