【前端】弹出框提交表单
发布时间：-11-03 22:30,
浏览次数：826
目录
* 功能描述
* 效果截图
* 代码
* html代码
* 触发弹出窗口的按钮
* js代码
* 弹出框的入口
* 调用弹出框
* 弹出框中的保存函数
* 弹出框中的取消函数
* 源码下载：
<>功能描述
点击某个按钮后，出现一个弹出框。用户在弹出框填写一些信息之后提交表单。
<>效果截图
<>代码
<>html代码
<>触发弹出窗口的按钮
ng-click="newFile()">
弹出框：
文件名：
type="text" id="create_name" />
作者：
type="text" id="create_author" />
文种：
id="create_type" > 总结报告
="辅助授课">辅助授课
其他
style="float: right;">
ng-click="create_paper_cancel()">取消
ng-click="create_paper_save()">保存
<>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实现通过按钮弹出表单
