1. 首页
  2. 未分类

js如何实现弹出form提交表单?

本篇文章主要给大家介绍js实现弹出提交表单的具体方法。

程序猿的生活:打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)zhuanlan.zhihu.com图标

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如何实现弹出form提交表单?

本篇文章就是关于js实现弹出提交表单的方法介绍,其实也是非常简单的,希望对需要的朋友有所帮助!

想要了解更多前端相关知识,可以关注我,欢迎大家参考学习!

主题测试文章,只做测试使用。发布者:IT资讯科技,转转请注明出处:http://www.cxybcw.com/198480.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code