点击按钮弹出模态框的⼀系列操作代码实例
实现功能
提交按钮功能:
点击提交按钮的时候都会弹出模态框,但是有不同的状态:
审核状态未通过:弹出未通过理由的input输⼊框,模态框中除了取消和确定按钮,新增确定并保存医院的按钮
审核状态已通过:如果新增医院的经纬度没有填写,会提⽰填写经纬度,填写之后点击提交按钮,模态框中显⽰确定和取消按钮
审核状态待审核:模态框中显⽰确定和取消按钮
添加医院的html代码:
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">
<span class="required">所属医院</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
@if($data->hospitalid > 0) **如果医院的id>0,就是存在对应的医院,让下⾯的输⼊框不能修改**
<input type="text" id="first-name" disabled value="{{$data->hospital->name}}" required="required" class="form-control col-md-7 col-xs-12">
@else **如果医院的id<=0,就是不存在对应的医院,让下⾯的输⼊框可以修改,同时填写医院的经纬度**
<input type="text" id="first-name" name="hospital_info" value="{{$data->hospital_info}}" required="required" class="form-control col-md-7 col-xs-12">
<div>
<input type="text" name="hospital_lat" placeholder="请输⼊医院经度"
class='hospitalLocation form-control hospitalLocation1' >
<input type="text" name="hospital_lng" placeholder="请输⼊医院纬度 "
class='hospitalLocation form-control hospitalLocation2' >
</div>
@endif
</div>
</div>
审核状态的相关html代码:
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">审核状态</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control choose" required="" @if($data->is_verify == 1) disabled @endif name="is_verify" data="{{$data->is_verify}}" > <option value="1" @if($data->is_verify == 1) selected @endif>未通过</option>
<option value="2" @if($data->is_verify == 2) selected @endif>已通过</option>
<option value="0" @if($data->is_verify == 0) selected @endif>待审核</option>
</select>
<input type="text" placeholder='填写未通过理由' name="check_reason" class='Nopass' value="{{$data->check_reason}}" style='display:none'>
**如果未通过审核的话会弹出这个input输⼊框,填写未通过理由**
</div>
</div>
总的表单提交按钮html代码:
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button type="button" class="btn btn-success" id="edit-submit" >提交</button>
**这个提交按钮的功能与上⾯的审核状态和添加医院相关信息有关系**
点击提交按钮的时候,弹出模态框,此时的模态框有两种状态:
1.
<button class="btn btn-primary" type="reset" onclick="javascript:history.back();">返回</button>
</div>
</div>
模态框的相应html代码:
<div class="modal fade" tabindex="-1" role="dialog" id="confirmSubmit">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title">确认提交吗?</h4>
</div>
{{--<div class="modal-body">--}}
{{--</div>--}}
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="save()" >确定
</button>
<button id="save_hospital_btn" type="button" class="btn btn-primary" data-dismiss="modal" onclick="save(1)" >确定并保存医院
</button>
</div>
</div>
</div>
</div>
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.ssage);
setTimeout(function(){//两秒后跳转
window.location.href = data.url;
},1000);
}else{
ssage);
}
},
error:function(data){
if (data.status == 422) {
var json=JSON.sponseText);
json = s;
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) {
ssage);
} else {
window.location.href = data.url;
}
};
}
以上所述是⼩编给⼤家介绍的js弹出模态框⽅法详解整合,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论