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


Posted in Javascript onMarch 29, 2019

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

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

实现功能

提交按钮功能:
点击提交按钮的时候都会弹出模态框,但是有不同的状态:
审核状态未通过:弹出未通过理由的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弹出模态框方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
Express.JS使用详解
Jul 17 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 #Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 #Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 #Javascript
微信小程序生成二维码的示例代码
Mar 29 #Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 #Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 #Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 #Javascript
You might like
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
mysql总结之explain
2012/02/27 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
javascript打印输出json实例
2013/11/11 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
webpack的CSS加载器的使用
2018/09/11 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
Python格式化压缩后的JS文件的方法
2015/03/05 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
想学python 这5本书籍你必看!
2018/12/11 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
EntityManager都有哪些方法
2013/11/01 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
采购求职信
2014/03/17 职场文书
生日庆典策划方案
2014/06/02 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
小学生暑假生活总结
2015/07/13 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
小学教师教学反思
2016/02/24 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python