网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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

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

成都创新互联-专业网站定制、快速模板网站建设、高性价比于都网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式于都网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖于都地区。费用合理售后完善,十年实体公司更值得信赖。

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

实现功能

提交按钮功能:
点击提交按钮的时候都会弹出模态框,但是有不同的状态:
审核状态未通过:弹出未通过理由的input输入框,模态框中除了取消和确定按钮,新增确定并保存医院的按钮
审核状态已通过:如果新增医院的经纬度没有填写,会提示填写经纬度,填写之后点击提交按钮,模态框中显示确定和取消按钮
审核状态待审核:模态框中显示确定和取消按钮

添加医院的html代码:

@if($data->hospitalid > 0) **如果医院的id>0,就是存在对应的医院,让下面的输入框不能修改** @else **如果医院的id<=0,就是不存在对应的医院,让下面的输入框可以修改,同时填写医院的经纬度**
@endif

审核状态的相关html代码:

**如果未通过审核的话会弹出这个input输入框,填写未通过理由**

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

**这个提交按钮的功能与上面的审核状态和添加医院相关信息有关系** 点击提交按钮的时候,弹出模态框,此时的模态框有两种状态: 1.

模态框的相应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弹出模态框方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


当前题目:点击按钮弹出模态框的一系列操作代码实例
标题路径:http://bjjierui.cn/article/gpichh.html

其他资讯