1. 程式人生 > >使用layer完成點選彈窗並且提交資料以及日期外掛的使用

使用layer完成點選彈窗並且提交資料以及日期外掛的使用

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>';