本篇文章主要介紹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" >
<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影片教學等等相關前端教學，歡迎大家參考學習！
以上是js如何實作彈出form提交表單？ （圖文+影片）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
