成都創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比于都網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式于都網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋于都地區(qū)。費(fèi)用合理售后完善,十年實(shí)體公司更值得信賴(lài)。
實(shí)現(xiàn)功能
提交按鈕功能:
點(diǎn)擊提交按鈕的時(shí)候都會(huì)彈出模態(tài)框,但是有不同的狀態(tài):
審核狀態(tài)未通過(guò):彈出未通過(guò)理由的input輸入框,模態(tài)框中除了取消和確定按鈕,新增確定并保存醫(yī)院的按鈕
審核狀態(tài)已通過(guò):如果新增醫(yī)院的經(jīng)緯度沒(méi)有填寫(xiě),會(huì)提示填寫(xiě)經(jīng)緯度,填寫(xiě)之后點(diǎn)擊提交按鈕,模態(tài)框中顯示確定和取消按鈕
審核狀態(tài)待審核:模態(tài)框中顯示確定和取消按鈕
添加醫(yī)院的html代碼:
@if($data->hospitalid > 0) **如果醫(yī)院的id>0,就是存在對(duì)應(yīng)的醫(yī)院,讓下面的輸入框不能修改** @else **如果醫(yī)院的id<=0,就是不存在對(duì)應(yīng)的醫(yī)院,讓下面的輸入框可以修改,同時(shí)填寫(xiě)醫(yī)院的經(jīng)緯度**@endif
審核狀態(tài)的相關(guān)html代碼:
**如果未通過(guò)審核的話(huà)會(huì)彈出這個(gè)input輸入框,填寫(xiě)未通過(guò)理由**
總的表單提交按鈕html代碼:
**這個(gè)提交按鈕的功能與上面的審核狀態(tài)和添加醫(yī)院相關(guān)信息有關(guān)系** 點(diǎn)擊提交按鈕的時(shí)候,彈出模態(tài)框,此時(shí)的模態(tài)框有兩種狀態(tài): 1.
模態(tài)框的相應(yīng)html代碼:
js代碼:
var hospitalId = {{$data->hospitalid}}; **拿到對(duì)應(yīng)醫(yī)院的id** **下面是點(diǎn)擊提交按鈕時(shí)的處理函數(shù)** $('#edit-submit').click(function () { is_verify = $('select[name=is_verify]').val(); **拿到審核狀態(tài)下拉框的值** if (is_verify == 1) { **未通過(guò)的時(shí)候** if (!$('input[name=check_reason]').val()) { layer.msg('請(qǐng)?zhí)顚?xiě)未通過(guò)理由'); **如果選擇未通過(guò)的時(shí)候,后面的未通過(guò)理由沒(méi)有填寫(xiě),值為空,彈出提示信息請(qǐng)?zhí)顚?xiě)未通過(guò)理由** return false; } } if (hospitalId <= 0) { **如果醫(yī)院不存在的話(huà)** if (is_verify == 1) { //審核未通過(guò) $('#save_hospital_btn').show() **模態(tài)框中新增確定并保存醫(yī)院的按鈕出現(xiàn)** } else if(is_verify == 2) { //審核通過(guò) if (!$('input[name=hospital_lat]').val() || !$('input[name=hospital_lng]').val()) { layer.msg('請(qǐng)?zhí)顚?xiě)醫(yī)院的經(jīng)緯度'); **所屬醫(yī)院下面的經(jīng)緯度有一個(gè)沒(méi)填寫(xiě)都會(huì)彈出提示信息** return false; } $('#save_hospital_btn').hide() **模態(tài)框中新增確定并保存醫(yī)院的按鈕消失** } else { **這個(gè)else中的條件就是 : 待審核中** $('#save_hospital_btn').hide() **模態(tài)框中新增確定并保存醫(yī)院的按鈕消失** } } $('#confirmSubmit').modal('show'); **只要點(diǎn)擊提交按鈕模態(tài)框就會(huì)顯示** });
$(function(){ $(":input[name=is_verify]").on("change",function(e){ **審核狀態(tài)的下拉列表發(fā)生變化的時(shí)候觸發(fā)這個(gè)函數(shù)** console.log($(this).attr("data"),$(this).val()); if($(this).attr("data") == 1){ layer.msg('已通過(guò)審批用戶(hù)不可繼續(xù)審批',{time:1000},function () { $(this).val(1); $(this).reset(); }); return false; } else { if ($(this).val() == 1) { **如果審核狀態(tài)是未通過(guò),顯示輸入未通過(guò)理由的input輸入框** $('.Nopass').show(); } else { $('.Nopass').hide(); } } }); });
function save(save_hospital){ **觸發(fā)模態(tài)框中新增確定并保存醫(yī)院的按鈕的函數(shù)** **save_hospital 是要傳遞的參數(shù)** data = $('#postform').serializeArray() **得到提交表單中的所有數(shù)據(jù)** if (save_hospital) { **如果要傳遞的參數(shù)已經(jīng)存在** if (!$('input[name=hospital_lat]').val() || !$('input[name=hospital_lng]').val()) { layer.msg('請(qǐng)?zhí)顚?xiě)醫(yī)院的經(jīng)緯度'); **如果經(jīng)緯度有一個(gè)沒(méi)填寫(xiě)就彈出這個(gè)信息** return false; } data.push({name:'save_hospital',value:1}); **將這個(gè)醫(yī)院保存到數(shù)據(jù)中** } $.ajax({ type: 'POST', url : "{{url('admin/pyhsician/')}}/"+{{$data->id}}, dataType: 'json', data: data, success: function(data){ if(data.status==1){ layer.msg(data.message); setTimeout(function(){//兩秒后跳轉(zhuǎn) window.location.href = data.url; },1000); }else{ alert(data.message); } }, error:function(data){ if (data.status == 422) { var json=JSON.parse(data.responseText); json = json.errors; for ( var item in json) { for ( var i = 0; i < json[item].length; i++) { layer.msg(json[item][i],{time:1000}); return ; //遇到驗(yàn)證錯(cuò)誤,就退出 } } } else { layer.msg('
以上所述是小編給大家介紹的js彈出模態(tài)框方法詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!