js如何實作彈出form提交表單？（圖文+影片）-html知識-PHP中文網

首頁

每日程式設計

html知識

js如何實作彈出form提交表單？（圖文+影片）

藏色散人

Oct 19, 2018 am 09:57 AM

本篇文章主要介紹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(&#39;all_light&#39;).style.display = &#39;block&#39;;
        document.getElementById(&#39;contes&#39;).style.display = &#39;block&#39;;
    }
</script>
</html>

透過瀏覽器訪問，最終效果如下圖所示：

js如何實作彈出form提交表單？（圖文+影片）

本篇文章就是關於js實作彈出提交表單的方法介紹，其實也是非常簡單的，希望對需要的朋友有幫助！

想要了解更多前端相關知識，可以關注PHP中文網JavaScript影片教學、Bootstrap影片教學等等相關前端教學，歡迎大家參考學習！

以上是js如何實作彈出form提交表單？（圖文+影片）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

禪工作室 13.0.1

強大的PHP整合開發環境

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3漢化版

中文版，非常好用

SublimeText3 Linux新版

SublimeText3 Linux最新版

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。

js如何實作彈出form提交表單？（圖文+影片）