超级简单的js弹窗教程，适合小小白学习
经常有初学前端的小伙伴遇到页面需要弹窗的时候，不知道该怎么办，网上找的教程又特别难，楼主本人也是一个名初学小白，经常遇到这种情况，于是就干脆自己写一个简单的表单弹窗，供大家学习：
首先先理清下思路：
第一步先把要显示的弹窗写好：
然后同时给这个框添加css：
然后预览一下看看效果：
好了，一个窗口就写好了，下一步就是要把这个弹窗隐藏，因为我们最终的目的是通过一个按钮的触发，来显示这个弹窗；我们给这个弹窗加一个display:none;来隐藏一下；
好了，再来预览下效果：
下面我来做一个按钮，让后通过按钮的触发效果，来显示这个弹窗；
这里做了两个，以便更好的应用到不同的环境下，触发命令是点击，然后给tc()写一个控制：
当我们点击按事件，触发弹窗的css从display:none 变成display:block;弹窗就显示出来了
弹窗出来之后，我们再给他加一个关闭的地方，如法炮制：
加个框；然后给框写好css
显示就这样了：
如图所示给按钮添加一个事件：
最终我们的简易弹窗就做好了，不知道啥原因，上传不了文件，就把源码贴在下面了，互相学习，新手初识，不到之处，请多多指点！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<style>
.ccc{
width: 200px;
height: 200px;
border: 1px solid green;
position: absolute;
left: 50%;
top: 30%;
background: green;
display: none;
}
.ccc .ccc1{
width: 100%;
height: 40px;
background: white;
}
.ccc .ccc1 span{
width: 16px;
height: 16px;
display: block;
float: right;
cursor: pointer;
}
</style>
<body>
<div class="ccc" id="ccc">
<div class="ccc1" id="ccc1">
<span title="关闭窗口" οnclick="gb();">X</span>
</div>
<div></div>
</div>
<button οnclick="tc();">点击弹窗</button>
<a href="javascript:;" οnclick="tc();">点击弹窗</a>
<script>
function tc(){
document.getElementById("ccc").style.display="block";
}
function gb(){
document.getElementById("ccc").style.display="none";
}
</script>
</body>
</html>