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视频教程等等相关前端教程,欢迎大家参考学习!
以上就是js如何实现弹出form提交表单?的详细内容,更多请关注编程之家其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。