<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>漂浮</title> </head> <style> *{ margin: 0; padding: 0; } .a{ width:100%; height: 50px; background-color: black; /*font-size: 10px;*/ display: block; } .b{ position:fixed; top:0; bottom:0; left:0; right:0; background-color: cornflowerblue; opacity: 0.3; display: none; } .c{ position:fixed; width:300px; height:200px; top:50%; left: 50%; background-color: aliceblue; margin-left: -200px; margin-top: -50px; display: none; } .v{ display: inline-block; } </style> <body> <div class="a"> <button onclick="push()">push</button> </div> <div class="b"></div> <div class="c"> <button onclick="cl()">close</button> </div> <script> var ele=document.getElementsByClassName("b")[0]; var ele2=document.getElementsByClassName("c")[0]; function push() { ele.classList.add("v"); ele2.classList.add("v"); } function cl() { ele.classList.remove("v"); ele2.classList.remove("v"); } </script> </body> </html>
js 窗口漂浮练习
猜你喜欢
转载自blog.csdn.net/weixin_42100915/article/details/80518823
今日推荐
周排行