JavaScript 自制模态对话框
预备知识：
HTML CSS： position；opacity；z-index；margin......
JS:
document.getElementById('id1').classList.remove('hide');
document.getElementById('id1').classList.add('hide');完整代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.c1{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #0f0f0f;
opacity: 0.5;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: #f9f9f9;
position: fixed;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -250px;
z-index: 10;
}
.hide{
display: none;
}
style>
head>
<body style="margin: 0;">
<div>
<input type="button" value="添加" onclick="ShowMod();">
div>
<div id='id1' class="c1 hide">
div>
<div id= 'id2'class="c2 hide">
<p class="=c3"><input type="text" placeholder="username">p>
<p><input type="password" placeholder="password">p>
<p><input type="button" value="取消" onclick="HideMod();">
<input type="button" value="确定">p>
div>
<script>
function ShowMod(){
document.getElementById('id1').classList.remove('hide');
document.getElementById('id2').classList.remove('hide');
}
function HideMod(){
document.getElementById('id1').classList.add('hide');
document.getElementById('id2').classList.add('hide');
}
script>
body>
html>总结：
position 属性规定元素的定位类型。
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 
opacity 设置元素的不透明级别
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
margin 简写属性在一个声明中设置所有外边距属性
说明：
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。
例子 1
margin:10px 5px 15px 20px;上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例子 2
margin:10px 5px 15px;上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例子 3
margin:10px 5px;上外边距和下外边距是 10px
右外边距和左外边距是 5px
例子 4 margin:10px;
所有 4 个外边距都是 10px
JavaScript DOM操作：
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
一、查找元素
1、直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合2、间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素二、操作
1、内容
innerText 文本
outerText
innerHTML HTML内容
innerHTML
value 值2、属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/3、class操作
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类4、标签操作
a.创建标签
// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://my.csdn.net/"
// 方式二
var tag = "";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])5、样式操作
var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";6、位置操作
总文档高度
document.documentElement.offsetHeight
当前文档占屏幕高度
document.documentElement.clientHeight
自身高度
tag.offsetHeight
距离上级定位高度
tag.offsetTop
父定位标签
tag.offsetParent
滚动高度
tag.scrollTop
/*
clientHeight -> 可见区域：height + padding
clientTop -> border高度
offsetHeight -> 可见区域：height + padding + border
offsetTop -> 上级定位标签的高度
scrollHeight -> 全文高：height + padding
scrollTop -> 滚动高度
特别的：
document.documentElement代指文档根节点
*/7、提交表单
document.geElementById('form').submit()8、其他操作
console.log 输出框
alert 弹出框
confirm 确认框
// URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载
// 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器三、事件 
对于事件需要注意的要点：
this
event
事件链以及跳出
this标签当前正在操作的标签，event封装了当前事件的内容。
参考：
http://www.w3school.com.cn/cssref/pr_pos_z-index.asp
http://www.runoob.com/cssref/pr-class-position.html
http://www.cnblogs.com/wupeiqi/articles/5643298.html