hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

【杂谈】js怎样完成弹出form提交表单?(图文+视频)

2019-11-18杂谈搜奇网45°c
A+ A-
本篇文章主要给人人引见 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>
            密&nbsp;&nbsp;&nbsp;码:<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完成弹出提交表单的要领引见,实在也是异常简朴的,愿望对须要的朋侪有所协助!

想要相识更多前端相干学问,能够关注Ki4网JavaScript视频教程、Bootstrap视频教程等等相干前端教程,迎接人人参考进修!

以上就是js怎样完成弹出form提交表单?(图文+视频)的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
【杂谈】js怎样完成弹出form提交表单?(图文+视频)

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

本文来源:搜奇网

本文地址:https://www.sou7.cn/281896.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>