search

Home >Daily Programming >HTML Knowledge >How to implement pop-up form submission in js? (Pictures + Videos)

How to implement pop-up form submission in js? (Pictures + Videos)

藏色散人
藏色散人Original
2018-10-19 09:57:0925549browse

This article mainly introduces to you the specific method of js to implement the pop-up submission form.

The implementation of js pop-up form submission is also one of the common questions in our front-end interviews. It may be a little difficult for front-end novices.

Below we will introduce in detail how to implement the special effects of js pop-up submission form with a simple code example.

The code example is as follows: 

<!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>

Access through the browser, the final effect is as shown below:

How to implement pop-up form submission in js? (Pictures + Videos)

This article This is an introduction to the method of js to implement pop-up submission form. It is actually very simple. I hope it will be helpful to friends who need it!

If you want to know more about front-end related knowledge, you can follow the PHP Chinese website JavaScript video tutorial, Bootstrap video tutorial and other related front-end tutorials. Welcome everyone to refer to and learn!

The above is the detailed content of How to implement pop-up form submission in js? (Pictures + Videos). For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to set check boxes, radio buttons and default options in HTML? (Pictures + Videos)Next article：How to set check boxes, radio buttons and default options in HTML? (Pictures + Videos)

Related articles

See more