Rumah >pengaturcaraan harian >pengetahuan html >js如何实现弹出form提交表单？（图文+视频）
js如何实现弹出form提交表单？（图文+视频）
- 藏色散人asal
- 2018-10-19 09:57:0925540semak imbas
本篇文章主要给大家介绍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>
密 码：<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实现弹出提交表单的方法介绍，其实也是非常简单的，希望对需要的朋友有所帮助！
想要了解更多前端相关知识，可以关注PHP中文网JavaScript视频教程、Bootstrap视频教程等等相关前端教程，欢迎大家参考学习！
Atas ialah kandungan terperinci js如何实现弹出form提交表单？（图文+视频）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：HTML如何设置复选框、单选框以及默认选项？（图文+视频）Artikel seterusnya：jQuery表单验证提交：前台验证一（图文+视频）