点击按钮弹出模态框的一系列操作代码实例

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

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

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

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

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