js melaksanakan borang penyerahan pop timbul

Cara menambah acara mendengar dan klik untuk keluar dari tetingkap timbul-Soal Jawab Rangkaian PHP Cina

<!DOCTYPE HTML>
<html>
<head>
    <title>js实现弹出提交表单 </title>
    <meta charset="utf-8">
    <style type="text/css">
        #all_light { /*整个弹窗的页面*/

            opacity: 0.8; /*透明度*/

            width: 100%; /*宽度*/

            height: 2300px; /*高度，不能百分百*/

            background: #000; /*背景色*/

            position: absolute;

            top: 0;

            left: 0; /*定位*/

            display: none; /*隐藏*/

            z-index: 1000; /*覆盖*/

        }

        #contes { /* 弹框的页面*/

            width: 500px; /*宽度*/

            height: 500px; /*高度*/

            background: #fff; /*背景色*/

            display: none; /*隐藏*/

            z-index: 1020; /*覆盖*/

            position: absolute;

            top: 100px;

            left: 400px; /* 定位*/
border:1px solid;
        }
        input{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<!-- 点击按钮 -->
<a href="javascript:void(0)" onclick="add()">
    添加
</a>
<!--  弹框的div -->
<div id="contes" style="">
    <div style="width:500px;height:40px;">
        添加用户
        <hr>
        <form style=" margin-left: 100px;">
            用户名：<input type="text" value="" name="" ><br>
            密&nbsp;&nbsp;&nbsp;码：<input type="password" value="" name=""><br>
            <input type="submit" value="提交">
        </form>
    </div>
</div>
<div id="all_light">
</div>
</body>
<script>
    function add() {
        document.getElementById('all_light').style.display = 'block';
        document.getElementById('contes').style.display = 'block';
    }
</script>
</html>