弹出页面，弹出框，$('').modal({}）；模态框

 效果图：

  自己可以添加内容；

 

引用：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;
    }