【前端】弹出框提交表单

功能描述

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

效果截图

代码

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实现通过按钮弹出表单