实现功能
提交按钮功能:
点击提交按钮的时候都会弹出模态框,但是有不同的状态:
审核状态未通过:弹出未通过理由的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}}" style="width:100px;position:relative"> <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" style="display: none" 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.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弹出模态框方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]