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> 密 码:<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>
通过浏览器访问,最终效果如下图所示:
本篇文章就是关于js实现弹出提交表单的方法介绍,其实也是非常简单的,希望对需要的朋友有所帮助!
想要了解更多前端相关知识,可以关注编程之家JavaScript视频教程、Bootstrap视频教程等等相关前端教程,欢迎大家参考学习!