使用layer完成点击弹窗并且提交数据以及日期插件的使用

来源：互联网发布：买鞋软件编辑：程序博客网时间：2024/05/21 22:54
function appointmentModal(){            var modal='';            modal+='<p class="subtitle"><i></i>请填写预约信息（目前“上门服务功能”暂时只支持广东省范围内地区的用户）</p>';            modal+='<form id="form" action=""><input id="policyId" type="hidden" name="policyId" value="${obj.data.policyId}">';            modal+='</form></div>';                         layer.open({                  type: 1                  ,title: false //不显示标题栏                  ,closeBtn: false                  ,area: '948px;'                  ,shade: 0.8                  ,id: 'LAY_layuipro1' //设定一个id，防止重复弹出                  ,resize: false                  ,btn: ['确认提交','取消']                  ,btnAlign: 'c'                  ,moveType: 1 //拖拽模式，0或者1                  ,content: modal                  ,yes: function(index,layero){                    //var btn = layero.find('.layui-layer-btn');                    //btn.find('.layui-layer-btn0').attr({                      //href: '${base}/policy/policylist'                                        //});                      var formData = $("#form").serializeArray();                      var contacts=$("#contacts").val();                      var contactNumber=$("#contactNumber").val();                      var appointmentTime=$("#appointmentTime").val();                      var meetingPlace=$("#meetingPlace").val();                      if(contacts==""){                                                 layer.msg('姓名不能为空哟！', {time : 1000});                      }else if(meetingPlace==""){                          layer.msg('上门地址不能为空哟', {time : 1000});                       }else{                         $.ajax({                                                                   url : '${base}/uri',                            type : 'post',                                                       data : formData,                                                     success : function() {                                                   layer.msg('预约成功', {time : 800});                                window.history.go(0);//成功以后刷新页面                             },                                                                   error : function(result) {                                               layer.msg('预约失败', {time : 800});                                 }                                                                 });                                                                }                  }                  ,btn2: function(index, layero){                      //这里是点击取消后的事件                  }            });        }        //下面是点击预约按钮触发的事件        $("#applyAppointment").click(function() {            appointmentModal();            $(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii',autoclose:true,minuteStep:30,todayBtn:true});        });//下面是时间插件的使用。需要导入的js和css分别是下面：<script src="${base}/static/layer/layer.js"></script>    <script src="${base}/static/js/bootstrap-datetimepicker.min.js"></script><link rel="stylesheet" href="${base}/static/css/bootstrap-datetimepicker.min.css">modal+='<div class="file-box clearf"><span>上门时间</span>';modal+='<input id="appointmentTime" name="appointmentTime" size="16" type="text" class="form_datetime"><b><i class="fa fa-calendar" aria-hidden="true"></i></b></div>';
0 0