JavaScript基础(7.综合实例)
2017-12-13 17:58
323 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top:0; bottom: 0; right: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -300px; z-index: 10; } </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowModel();"/> <table> <thead> <tr> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody> <tr> <td>1.1.1.1</td> <td>90</td> </tr> <tr> <td>1.1.1.2</td> <td>91</td> </tr> <tr> <td>1.1.1.3</td> <td>92</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> <p> <input type="button" value="取消" onclick="HideModel();"/>
<input type="button" value="确定"/></p></div><!--弹出框结束--><script> function ShowModel(){ document.getElementById("i1").classList.remove("hide"); document.getElementById("i2").classList.remove("hide"); } function HideModel(){ document.getElementById("i1").classList.add("hide"); document.getElementById("i2").classList.add("hide"); }</script></body></html>
效果是这样:
打开网页时候是这样:
然后点击添加键后变成这样:
如果点击取消键之后会变成这样:
这就是一个简单的例子,综合了以前学过的知识。
相关文章推荐
- 由浅入深JavaScript9基础-Dom综合实例1
- javascript事件的绑定基础实例讲解(34)
- JS基础学习第六天:JavaScript对象入门(构造函数和实例对象)
- JavaScript基础教程之alert弹出提示框实例
- javascript图片切换综合实例(循环切换、顺序切换)
- javascript基础实例
- javascript 对象基础 继承机制实例 call() apply 方法!
- JavaScript基础实例
- Eclipse插件开发 学习笔记 PDF 第一篇到第四篇 免分下载 开发基础 核心技术 高级进阶 综合实例
- javascript滚轮事件基础实例讲解(37)
- 新手入门学javascript基础笔记与实例
- android基础学习综合实例——天气预报App(基本功能实现)
- Eclipse插件开发 学习笔记 PDF 第一篇到第四篇 免分下载 开发基础 核心技术 高级进阶 综合实例
- [导入]JavaScript基础之继承(附实例)
- 2015/12/10--基础javascript实例
- 【javascript基础】JS正则表达式的实例方法
- CSS基础(12.background综合实例)
- javascript操作xml文件综合实例
- 《JavaScript 基础教程(第6版)》第三章中的Bingo卡片程序实例
- javascript基础实例教程(一)