实现功能

提交按钮功能：

点击提交按钮的时候都会弹出模态框，但是有不同的状态：

审核状态未通过：弹出未通过理由的input输入框，模态框中除了取消和确定按钮，新增确定并保存医院的按钮

审核状态已通过：如果新增医院的经纬度没有填写，会提示填写经纬度，填写之后点击提交按钮，模态框中显示确定和取消按钮

审核状态待审核：模态框中显示确定和取消按钮

添加医院的html代码：

审核状态的相关html代码：

总的表单提交按钮html代码：

模态框的相应html代码：

js代码：

var hospitalId = {{$data->hospitalid}}; **拿到对应医院的id**

**下面是点击提交按钮时的处理函数**

$('#edit-submit').click(function () {

is_verify = $('select[name=is_verify]').val(); **拿到审核状态下拉框的值**

if (is_verify == 1) { **未通过的时候**

if (!$('input[name=check_reason]').val()) {

layer.msg('请填写未通过理由'); **如果选择未通过的时候，后面的未通过理由没有填写，值为空，弹出提示信息请填写未通过理由**

return false;

}

}

if (hospitalId <= 0) { **如果医院不存在的话**

if (is_verify == 1) { //审核未通过

$('#save_hospital_btn').show() **模态框中新增确定并保存医院的按钮出现**

} else if(is_verify == 2) { //审核通过

if (!$('input[name=hospital_lat]').val() || !$('input[name=hospital_lng]').val()) {

layer.msg('请填写医院的经纬度'); **所属医院下面的经纬度有一个没填写都会弹出提示信息**

return false;

}

$('#save_hospital_btn').hide() **模态框中新增确定并保存医院的按钮消失**

} else { **这个else中的条件就是 ： 待审核中**

$('#save_hospital_btn').hide() **模态框中新增确定并保存医院的按钮消失**

}

}

$('#confirmSubmit').modal('show'); **只要点击提交按钮模态框就会显示**

});

$(function(){

$(":input[name=is_verify]").on("change",function(e){ **审核状态的下拉列表发生变化的时候触发这个函数**

console.log($(this).attr("data"),$(this).val());

if($(this).attr("data") == 1){

layer.msg('已通过审批用户不可继续审批',{time:1000},function () {

$(this).val(1);

$(this).reset();

});

return false;

} else {

if ($(this).val() == 1) { **如果审核状态是未通过，显示输入未通过理由的input输入框**

$('.Nopass').show();

} else {

$('.Nopass').hide();

}

}

});

});

function save(save_hospital){ **触发模态框中新增确定并保存医院的按钮的函数** **save_hospital 是要传递的参数**

data = $('#postform').serializeArray() **得到提交表单中的所有数据**

if (save_hospital) { **如果要传递的参数已经存在**

if (!$('input[name=hospital_lat]').val() || !$('input[name=hospital_lng]').val()) {

layer.msg('请填写医院的经纬度'); **如果经纬度有一个没填写就弹出这个信息**

return false;

}

data.push({name:'save_hospital',value:1}); **将这个医院保存到数据中**

}

$.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(){//两秒后跳转

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 ; //遇到验证错误，就退出

}

}

} else {

layer.msg('服务器连接失败',{time:1000});

}

return ;

}

});

return false;

function success(data) {

if (data.status == 0) {

alert(data.message);

} else {

window.location.href = data.url;

}

};

}

以上所述是小编给大家介绍的js弹出模态框方法详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！