1、模态对话框：
当点击某个按钮时，是某个样式显示；点击另一个按钮，使该样式隐藏；
该示例使用了css三层背景相关内容以及上节学到的js相关内容DOM直接选择器与间接选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display:none; } .c1{ position:fixed; left:0; top:0; right:0; bottom:0; background-color:black; opacity:0.3; z-index:9; } .c2{ position:fixed; 300px; height:300px; background-color:white; top:50%; left:50%; margin-left:-150px; margin-top:-150px; z-index:10; } </style> </head> <body style="margin:0"> <div> <input type="button" value="添加" onclick="ShowModle();"/> <input type="button" value="全选" onclick="ChooseAll();"/> <input type="button" value="取消" onclick="CancleAll();"/> <input type="button" value="反选" onclick="ReverseAll();"/> <table> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox"/></td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox"/></td> <td>1.1.1.2</td> <td>191</td> </tr> <tr> <td><input type="checkbox"/></td> <td>1.1.1.3</td> <td>192</td> </tr> </tbody> </table> </div> <!-- 遮罩层开始 --> <div id="i1" class="c1 hide"></div> <!-- 遮罩层结束 --> <!-- 弹出框开始 --> <div id="i2" class="c2 hide"> <p><input type="text"/></p> <p><input type="text"/> <p> <input type="button" value="取消" onclick="HideModle();"/> <input type="button" value="确定"/> </p> </div> <!-- 弹出框结束 --> <script> function ShowModle(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function HideModle(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } function ChooseAll(){ var tbody=document.getElementById('tb'); var tr_list=tbody.children; for(var i=0;i<tr_list.length;i++){ var current_tr=tr_list[i]; //获取所有的tr标签 var checkbox=current_tr.children[0].children[0]; //拿到input标签 checkbox.checked=true; //选择该对象为true；不选择为false checkbox对象.checked = true } } function CancleAll(){ var tbody=document.getElementById('tb'); var tr_list=tbody.children; for(var i=0;i<tr_list.length;i++){ var current_tr=tr_list[i]; //获取所有的tr标签 var checkbox=current_tr.children[0].children[0]; //拿到input标签 checkbox.checked=false; //选择该对象为true；不选择为false checkbox对象.checked = true } } function ReverseAll(){ var tbody=document.getElementById('tb'); var tr_list=tbody.children; for(var i=0;i<tr_list.length;i++){ var current_tr=tr_list[i]; //获取所有的tr标签 var checkbox=current_tr.children[0].children[0]; //拿到input标签 if(checkbox.checked){ checkbox.checked=false; }else{ checkbox.checked=true; } } } </script> </body> </html>
执行结果如下：
当点击添加按钮时，会跳出弹窗；点击该弹窗的取消按钮，该弹窗消失；
当点击全选按钮时，会把勾选框全部进行勾选；点击取消按钮，会把勾选取消；点击反选按钮，则会把勾选的取消，未勾选的进行勾选。
