功能描述

點選某個按鈕後，出現一個彈出框。使用者在彈出框填寫一些資訊之後提交表單。

效果截圖

程式碼

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("儲存失敗！");
    	   })
    	};