目錄

• • 功能描述
  • 效果截圖
  • 代碼
  • • html代碼
    • • 觸發彈出窗口的按鈕
    • js代碼
    • • 彈出框的入口
      • 調用彈出框
      • 彈出框中的保存函數
      • 彈出框中的取消函數
  • 源碼下載：

功能描述

點擊某個按鈕后，出現一個彈出框。用戶在彈出框填寫一些信息之后提交表單。

效果截圖

代碼

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實現通過按鈕彈出表單

總結

以上是生活随笔為你收集整理的【前端】弹出框提交表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。