弹出页面，弹出框，$(‘‘).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,//点击遮罩层时关闭 ModalcloseOnConfirm: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")@ResponseBodypublic 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;}

弹出页面，弹出框，$(‘‘).modal({}）；模态框相关推荐

SharePoint 客户端经常弹出Windows验证登录框问题
场景描述: Site工作人员UserA创建了一个Task,并且Assign给UserB.UserB接到来自Task List的邮件通知.这时UserA发现Assign的人错了,重新修改Task Ite ...
批量删除，未勾选数据，点击【批量删除】弹出确认删除提示框
批量删除,未勾选数据,点击[批量删除]弹出确认删除提示框给table组件,添加ref="selections" 在分页方法中,添加方法.设置为空
iOS中Mach异常和signal信号介绍，以及当APP崩溃时做线程保活弹出程序异常提示框
我们经常会遇到APP闪退和崩溃的问题,那么我们应该通过什么变量去监听APP的异常呢?如何在程序崩溃时,保证程序不闪退,并给用户弹出一个提示框呢? 这是本文将要讲述的内容. 先介绍2个概念,Mach异常 ...
upload 上传文件之前判断，先判断再弹出文档选择框
如果想要点击上传按钮判断某个条件是否符合,再弹出文档选择框的效果, 不需要在Upload标签绑定before-upload事件,而是在上传Button按钮绑定事件 <Upload action= ...
mt6735 Audio framework]音量警告提示框选择OK，重启后再增大音量希望还会弹出音量警告提示框
[DESCRIPTION] 目前的做法是: 音量警告提示框选择OK,重启后就不会再弹出警告提示框, 除非恢复出厂设置如果希望重启后再增大音量希望还会弹出音量警告提示框请参考如下修改: [SOLUT ...
android 弹出框带标题栏,Android微信右上角弹出的对话选择框实现
Android微信右上角弹出的对话选择框实现我在之前的文章中曾给出了一个开源的微信UI大体实现方案具体代码实现,参见附录文章1.本文单单挑出一个微信的UI实现点:微信右上角弹出的选择对话框.如 ...
轻量级Modal模态框插件cta.js
今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览源码下载实现的代码. html代码: <se ...
修改bootstrap modal模态框的宽度
修改bootstrap modal模态框的宽度修改的不是modal这个大div 而是modal-dialog这个会话div <div class="modal fade" ...
php网页，想弹出对话框，消息框简单代码
php网页,想弹出对话框, 消息框简单代码 <?php echo "<script language=\"JavaScript\">alert(\&q ...
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js)
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) 参考文章: (1)Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) (2)https://www. ...

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

效果图：

引用：amazeui前端框架：

弹出页面：

触发按钮：

js:

后端代码：

弹出页面，弹出框，$(‘‘).modal({}）；模态框相关推荐

最新文章

热门文章