最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:懂视网 责编:小采 时间:2020-11-27 21:59:28
文档

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

点击按钮弹出模态框的一系列操作代码实例: 实现功能 提交按钮功能: 点击提交按钮的时候都会弹出模态框,但是有不同的状态: 审核状态未通过:弹出未通过理由的input输入框,模态框中除了取消和确定按钮,新增确定并保存医院的按钮 审核状态已通过:如果新增医院的经纬度没有填写,会提示填写经纬度
推荐度:
导读点击按钮弹出模态框的一系列操作代码实例: 实现功能 提交按钮功能: 点击提交按钮的时候都会弹出模态框,但是有不同的状态: 审核状态未通过:弹出未通过理由的input输入框,模态框中除了取消和确定按钮,新增确定并保存医院的按钮 审核状态已通过:如果新增医院的经纬度没有填写,会提示填写经纬度

实现功能

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

文档

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

点击按钮弹出模态框的一系列操作代码实例: 实现功能 提交按钮功能: 点击提交按钮的时候都会弹出模态框,但是有不同的状态: 审核状态未通过:弹出未通过理由的input输入框,模态框中除了取消和确定按钮,新增确定并保存医院的按钮 审核状态已通过:如果新增医院的经纬度没有填写,会提示填写经纬度
推荐度:
标签: 显示 操作 点击
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top