【前端】弹出框提交表单

功能描述

点击某个按钮后，出现一个弹出框。用户在弹出框填写一些信息之后提交表单。

效果截图

代码

html代码

触发弹出窗口的按钮

<div class="col-1"><input type="button" class="my-btn-blue" value="新建" ng-click="newFile()"></div>

弹出框：

 <div id="my_dialog" title="新建公文"  style="display: none" ><form><p>文件名：<input type="text" id="create_name" /></p><p>作&nbsp;&nbsp;者&nbsp;&nbsp;：<input type="text" id="create_author" /></p><p>文&nbsp;&nbsp;种&nbsp;&nbsp;：<select id="create_type" ><option value ="总结报告">总结报告</option> <option value ="辅助授课">辅助授课</option> <option value ="其他">其他</option> </select></p><div style="float: right;"><button class="my-btn-gray" ng-click="create_paper_cancel()">取消</button><button class="my-btn-blue" ng-click="create_paper_save()">保存</button></div></form></div>

js代码

弹出框的入口

     /*新建文件*/$scope.newFile =function(){$scope.showdiv();};

调用弹出框

   $scope.showdiv=function(){$('#my_dialog').dialog({modal:true,width:"400",height:"223"});document.getElementById("my_dialog").style.display="block";};

弹出框中的保存函数

 $scope.create_paper_cancel=function(){console.info("取消");$("#create_name").val("");$("#create_author").val("");$("#create_type").empty(); var ops={"总结报告":"总结报告","辅助授课":"辅助授课","其他":"其他"};var parent=document.getElementById("create_type");for(var key in ops){var o = new Option(ops[key],key);parent.appendChild(o);}$('#my_dialog').dialog("close");};

弹出框中的取消函数

        $scope.create_paper_save=function(){$('#my_dialog').dialog("close");$scope.create_name = document.getElementById("create_name").value; var create_author = document.getElementById("create_author").value;   var create_type = document.getElementById("create_type").value;   var data={filename:$scope.create_name,author:create_author,type:create_type};Document.create_paper_save(data,$http, function (response) {// 进一步的操作newFileextend();}, function () {alert("保存失败！");})};

源码下载：

jquery实现通过按钮弹出表单

【前端】弹出框提交表单相关推荐

html表单弹窗提示框,【前端】弹出框提交表单
[前端]弹出框提交表单发布时间:2018-11-03 22:30, 浏览次数:826 目录 * 功能描述 * 效果截图 * 代码 * html代码 * 触发弹出窗口的按钮 * js代码 * 弹出框的 ...
JEECG弹出框提交表单
一.设备主页面(deviceMain.jsp) <t:dgToolBar title="编辑设备" icon="icon-edit" url=" ...
微信小程序vantweapp-Dialog弹出框提交表单，并还原确定按钮样式
vantweapp中Dialog弹出框使用组件调用,怎么将form表单的提交按钮与Dialog弹出框相结合呢解决方案: wxml代码 <van-dialoguse-slottitle=&quo ...
layui写弹出框显示表单信息_layui 弹出框提交表单
layer.open({ type:1, title:"发送消息", skin:"myclass",//自定样式 area:["800px" ...
layui弹出层提交表单！
本文章使用layui框架,提交表单,如果使用其他的框架请右上角! 首先设置弹出层如下图: layer.open({ type : 2, title : "信息編輯", area : ...
layui弹出层的表单验证
这里写自定义目录标题 layui弹出层form表单自带的验证不执行废话少说放代码接下来如何让弹出层执行form验证规则但是这个提交并不完整依旧有问题,只是部分验证有用,表单验证没有验证数据直接提 ...
jsp + js + 前端弹出框
在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框代码: var a = "Hello ...
前端把信息放在弹框里显示出来_jsp + js + 前端弹出框
在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框代码: var a = "Hello ...
html点击弹出登录注册表单提交代码
介绍: html手机登录表单,手机注册表单,弹出表单,点击弹出弹窗. 用于用户登录点击登录跳出弹窗作用,代码逻辑基本上没啥问题,美化一下就可以线上使用网盘下载地址:点击登录弹窗代码.zip - 蓝奏 ...
EasyUI加zTree使用解析 easyui修改操作的表单回显方法验证框提交表单前验证 datagrid的load方法
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{code: '01',name: 'name01' }); easyui修改操作的回显方法 ...

【前端】弹出框提交表单

目录

功能描述

效果截图

代码

html代码

触发弹出窗口的按钮

js代码

弹出框的入口

调用弹出框

弹出框中的保存函数

弹出框中的取消函数

源码下载：

【前端】弹出框提交表单相关推荐

最新文章

热门文章