武沛齐模态对话框课堂作业

森林光头强大叔叔

于 2017-12-10 20:31:00 发布

阅读量176

点赞数

原文链接：http://www.cnblogs.com/hushuning/p/8018021.html

版权

 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>