js如何实现弹出form提交表单？（图文+视频）

互联网 18-10-19

本篇文章主要给大家介绍js实现弹出提交表单的具体方法。

js弹出form表单提交的实现也是我们前端面试常见的问题之一，对于前端新手来说，可能存在一点难度。

下面我们会结合简单的代码示例为大家详细介绍，js弹出提交表单特效的实现方法。

<!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: 2; /*覆盖*/         }         #contes { /* 弹框的页面*/             width: 500px; /*宽度*/             height: 500px; /*高度*/             background: #fff; /*背景色*/             display: none; /*隐藏*/             z-index: 2; /*覆盖*/             position: absolute;             top: 100px;             left: 400px; /* 定位*/         }         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>

通过浏览器访问，最终效果如下图所示：