彈出頁面,彈出框,$('').modal({});模態框
阿新 • • 發佈:2018-12-23
效果圖:
自己可以新增內容;
引用:amazeui前端框架:
<link rel="stylesheet" href="/tc_vsmp/view/assets/css/utils/amazeui.min.css"/>
<script src="/tc_vsmp/view/assets/js/utils/amazeui.min.js"></script>
彈出頁面:
<!-- start modal --> <div class="am-modal am-modal-prompt form-am-modal" tabindex="-1" id="handle-form-modal-credit"> <div class="am-modal-dialog"> <div class="am-modal-hd">XXX</div> <div class="am-modal-bd"> <form class="am-form am-form-horizontal" id="handle-form-credit"> <div class="am-form-group"> <label class="am-u-sm-3 am-form-label">XXX</label> <div class="am-u-sm-9"> <input type="hidden" name="id" id="loanApplyId" value=""> <input type="text" id="table-item-operator" name="operator" value="${loginUser}" class="am-modal-prompt-input" readonly> </div> </div> <div class="am-form-group"> <label class="am-u-sm-3 am-form-label">XXX</label> <div class="am-u-sm-9"> <input type="text" name="apply_amount" id="creditApplyAmount1" class="am-modal-prompt-input" placeholder="XXXXXX"> </div> </div> <div class="am-form-group"> <label class="am-u-sm-3 am-form-label">XXX</label> <div class="am-u-sm-9"> <select data-am-selected id="table-item-capital-source" name="capital_source"> <option value="0">XXX</option> <option value="1">XXX</option> <option value="2">XXX</option> <option value="3">XXX</option> <option value="4">XXX</option> <option value="5">XXX</option> </select> </div> </div> </form> </div> <div class="am-modal-footer"> <span class="am-modal-btn" data-am-modal-cancel>取消</span> <span class="am-modal-btn" data-am-modal-confirm>提交</span> </div> </div> </div><!-- end modal-->
觸發按鈕:
<a href="javascript:void(0);" class="am-btn am-btn-primary handle-btn" onclick="creditApplyAmount('{{= lat_id}}')"><span class="am-icon-archive"></span> 授信額度 </a>
js:
//按鈕觸發 function creditApplyAmount(id) { //頁面處理按鈕的提交 $('#handle-form-modal-credit').modal({ relatedTarget: this, closeViaDimmer:false,//點選遮罩層時關閉 Modal closeOnConfirm:false,//點選確認時不關閉視窗 onConfirm: function(e) { var apply_amount = $("#creditApplyAmount1").val(); var capital_source = $("#table-item-capital-source").val(); $.ajax({ type:"POST", // contentType:"application/json", //WebService 會返回Json型別 url:basePath+"credit/updateLoanApplyCredit", data: {"id":id,"apply_amount":apply_amount,"capital_source":capital_source}, dataType:"json", success:function(data){ if(data==1){ $('#handle-form-modal-credit').modal('close'); $("#creditApplyAmount1").val(""); $("#table-item-capital-source option[value='0'] ").attr("selected",true); alert("成功!"); //重新整理頁面 commitAjax({'url':getDataUrl(), 'param':getQueryCondition()}); }else{ alert("失敗!"); } }, error:function(){ alert("異常"); } }); }, onCancel: function(e) { var apply_amount = $("#creditApplyAmount1").val(""); $("#table-item-capital-source option[value='0'] ").attr("selected",true); //alert('你取消提交了!'); } }); }
後端程式碼:
/** * xxxxx * @param loanApply * @param request * @return */ @RequestMapping("/updateLoanApplyCredit") @ResponseBody public Integer updateLoanApplyCredit( LoanApply loanApply, HttpServletRequest request) { Integer a = 0; try { a = service.updateLoanApplyAmount(loanApply); BaseController.saveLog( SecurityUtils.getSubject().getPrincipals().toString(), DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss"), DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss"), BaseController.getRequestIp(request), "xxxxx", "xxxxxxx", 1, 1, ""); } catch (Exception e) { BaseController.saveLog( SecurityUtils.getSubject().getPrincipals().toString(), DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss"), DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss"), BaseController.getRequestIp(request), "xxxxx", "xxxxxxx, 0, 1, ""); } return a; }