1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1{ 8 position:fixed;/* 将模块彻底固定*/ 9 left: 0;/* 设置左边距撑开*/ 10 top: 0;/*设置上边距撑开*/ 11 right: 0;/*设置右边距撑开*/ 12 bottom: 0;/*设置下边距撑开模块*/ 13 background-color: blue;/*设置背景颜色为蓝色*/ 14 opacity: 0.8;/*设置透明度为0.8，最高1，最低0*/ 15 z-index: 9;/**/ 16 } 17 .c2{ 18 width: 400px;/*设置宽像素*/ 19 height: 200px;/*设置高像素*/ 20 background-color: white;/*背景色*/ 21 position: fixed;/*固定模块*/ 22 left: 50%;/*边距居中*/ 23 top: 50%;/*距离顶部居中*/ 24 margin-left: -250px;/*左边距*/ 25 margin-top: -200px;/*上边距*/ 26 z-index: 10;/*模块层叠级别，数字越大级别越高，被放在上面。*/ 27 28 } 29 .hide{display:none;}/**/ 30 </style> 31 </head> 32 <body> 33 <div ><input type="button" value="添加" style="font-size: 20px" onclick="rem()"> 34 </div> 35 <div>198.234.234.234.</div> 36 <div>198.234.234.234.</div> 37 <div>198.234.234.234.</div> 38 <div>198.234.234.234.</div> 39 <div>198.234.234.234.</div> 40 <div id='i1' class="c1"></div> 41 <div id='i2' class="c2"> 42 <input type="button" value="确定" onclick="func()"><!--设置按钮，点击调用函数 --> 43 <input type="button" value="取消" onclick="func()"><!-- 设置按钮，点击事件同上--> 44 </div> 45 <script> 46 function func() { 47 i1 = document.getElementById('i1');//获取元素 48 i1.classList.add('hide');//操作元素，对id为i1的属性添加hide属性。 49 i2 = document.getElementById('i2');//获取id为i2的元素 50 i2.classList.add('hide');//操作其属性添加hideclass属性 51 52 } 53 func() 54 function rem(){ 55 i1 = document.getElementById('i1');//获取元素 56 i1.classList.remove('hide');//删除属性hide 57 i2 = document.getElementById('i2');//获取元素 58 i2.classList.remove('hide');//删除属性hide 59 } 60 </script> 61 62 63 </body> 64 </html>