【前端】弹出框提交表单 - 好文

目录

* 功能描述 <https://blog.csdn.net/diyinqian/article/details/83691464#_1>
* 效果截图 <https://blog.csdn.net/diyinqian/article/details/83691464#_4>
* 代码 <https://blog.csdn.net/diyinqian/article/details/83691464#_8>
* html代码 <https://blog.csdn.net/diyinqian/article/details/83691464#html_9>
* 触发弹出窗口的按钮 <https://blog.csdn.net/diyinqian/article/details/83691464#_10>
* js代码 <https://blog.csdn.net/diyinqian/article/details/83691464#js_37>
* 弹出框的入口 <https://blog.csdn.net/diyinqian/article/details/83691464#_38>
* 调用弹出框 <https://blog.csdn.net/diyinqian/article/details/83691464#_46>
* 弹出框中的保存函数 <https://blog.csdn.net/diyinqian/article/details/83691464#_58>
* 弹出框中的取消函数 <https://blog.csdn.net/diyinqian/article/details/83691464#_82>
* 源码下载： <https://blog.csdn.net/diyinqian/article/details/83691464#_99>

<>功能描述

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

<>效果截图

<>代码

<>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>作者：<input
type="text" id="create_author" /></p> <p>文种：<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实现通过按钮弹出表单 <https://download.csdn.net/download/diyinqian/10928042>

热门工具换一换