java设置弹出框为模态_点击按钮弹出模态框的一系列操作代码实例

d9ef830ae85e448653fc3988ea9f69fc.png

85d0acd38bd5ede415abf01cbfeae2d4.png

实现功能

提交按钮功能:

点击提交按钮的时候都会弹出模态框,但是有不同的状态:

审核状态未通过:弹出未通过理由的input输入框,模态框中除了取消和确定按钮,新增确定并保存医院的按钮

审核状态已通过:如果新增医院的经纬度没有填写,会提示填写经纬度,填写之后点击提交按钮,模态框中显示确定和取消按钮

审核状态待审核:模态框中显示确定和取消按钮

添加医院的html代码:

所属医院

@if($data->hospitalid > 0) **如果医院的id>0,就是存在对应的医院,让下面的输入框不能修改**

@else **如果医院的id<=0,就是不存在对应的医院,让下面的输入框可以修改,同时填写医院的经纬度**

class='hospitalLocation form-control hospitalLocation1' >

class='hospitalLocation form-control hospitalLocation2' >

@endif

审核状态的相关html代码:

审核状态

is_verify == 1) disabled @endif name="is_verify" data="{{$data->is_verify}}" style="width:100px;position:relative">

is_verify == 1) selected @endif>未通过

is_verify == 2) selected @endif>已通过

is_verify == 0) selected @endif>待审核

**如果未通过审核的话会弹出这个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://www.mzph.cn/news/336831.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spock框架_Spock VW:编写自定义的Spock框架扩展

spock框架Spock框架具有多个内置扩展 &#xff0c;这些扩展支持许多核心功能&#xff0c;例如Ignore和Timeout批注。 但更重要的是&#xff0c;鼓励开发人员编写自己的扩展。 例如&#xff0c; SpringExtension很好地将Spock与Spring框架集成在一起。 编写自定义扩展没有很好的…

java log 断点_项目中常见的log日志调用

第一种用法&#xff1a;引用org.apache.commons.logging.Log。import org.apache.commons.logging.Log;import org.apache.commons.logging.LogFactory;private static final Log logger LogFactory.getLog(PolicyAppBizAction.class); //PolicyAppBizAction.class是自己定义…

侦听127.0.01_Spring 4.2中由注释驱动的事件侦听器

侦听127.0.01介绍 在应用程序内交换事件已成为许多应用程序中必不可少的部分&#xff0c;幸运的是&#xff0c;Spring为瞬态事件&#xff08;*&#xff09;提供了完整的基础结构。 最近对事务绑定事件的重构为我提供了一个借口&#xff0c;以在实践中检查Spring 4.2中引入的新的…

java中bpmn流程图_Java学习之BPMN知识以及Activiti的流程部署

BPMN的介绍Activiti项目是一项新的基于Apache许可的开源BPM平台&#xff0c;从基础开始构建&#xff0c;旨在提供支持新的BPMN 2.0标准&#xff0c;包括支持对象管理组(OMG)&#xff0c;面对新技术的机遇&#xff0c;诸如互操作性和云架构&#xff0c;提供技术实现。那什么是BP…

javaone_JavaOne 2015 –第二十版十大收获

javaone我们刚刚在旧金山有了JavaOne的第二十版。 这将是我自2004年以来第十二次参加不间断的系列活动。最大的教训是什么&#xff0c;可以揭示Java的未来。 模块化斗争 自从Java 2007首次提到模块以来&#xff0c;已经花费了将近9年的时间&#xff0c;或者说&#xff0c;直到…

java批量处理数据库语句_Java项目中调用bat批处理进行多用户数据库备份

Java项目中调用bat批处理配合使用BCP进行多用户数据的备份一、项目需求最近项目中需要对数据库(Sql Server系列数据库)进行备份。项目中的需求不是简单的整个数据库的备份&#xff0c;而是根据用户来备份&#xff0c;具体的备份策略如下&#xff1a;①系统为某一赛事管理类型的…

mycat和应用程序集成_企业应用程序集成简介

mycat和应用程序集成本文是我们名为“ EAI的Spring集成 ”的学院课程的一部分。 在本课程中&#xff0c;向您介绍了企业应用程序集成模式以及Spring Integration如何解决它们。 接下来&#xff0c;您将深入研究Spring Integration的基础知识&#xff0c;例如通道&#xff0c;转…

java中读取单个字符_如何使用Java中的Scanner类读取单个字符?

从Java 1.5开始引入Scanner类。此类接受File&#xff0c;InputStream&#xff0c;Path和String对象&#xff0c;使用正则表达式逐个令牌读取所有原始数据类型和String(从给定的源)令牌。默认情况下&#xff0c;空格被视为定界符(将数据分成令牌)。使用Scanner类读取字符Scanner…

java中的case1怎么说_Java Cas20ServiceTicketValidator類代碼示例

本文整理匯總了Java中org.jasig.cas.client.validation.Cas20ServiceTicketValidator類的典型用法代碼示例。如果您正苦於以下問題&#xff1a;Java Cas20ServiceTicketValidator類的具體用法&#xff1f;Java Cas20ServiceTicketValidator怎麽用&#xff1f;Java Cas20Service…

drill apache_使用Apache Drill深入研究当今的大数据

drill apache自2014年9月首次提供Beta版以来&#xff0c; Apache Drill一直在获得广泛的用户采用和社区动力。2015年5月发布了Drill的通用版本-Drill 1.0&#xff0c;此后大量客户在生产中部署和使用了Drill。 在这篇博客文章中&#xff0c;我将简要总结客户在Drill中发现非常宝…

akka 消息发送接收_Akka型演员:探索接收器模式

akka 消息发送接收在上一篇文章中&#xff0c;我们研究了Akka Typed提供的一些基本功能。 在本文和下一篇文章中&#xff0c;我们将更进一步地了解一些其他功能&#xff0c;并通过查看Akka Typed提供的两种不同模式来做到这一点&#xff1a;Receiver和Receptionist模式。 如果您…

scale和java比较_浅谈java中BigDecimal的equals与compareTo的区别

这两天在处理支付金额校验的时候出现了点问题&#xff0c;有个金额比较我用了BigDecimal的equals方法来比较两个金额是否相等&#xff0c;结果导致金额比较出现错误(比如3.0与3.00的比较等)。【注&#xff1a;以下所讲都是以sun jdk 1.4.2版本为例&#xff0c;其他版本实现未必…

activemq和jms_带有ActiveMQ和Maven的JMS Sender应用程序

activemq和jms我们已经看到了如何使用ActiveMQ和Maven创建JMS Receiver应用程序 。 让我们看看我们如何类似地创建JMS Sender应用程序 。 web.xml与创建接收器应用程序时使用的相同&#xff1a; <web-app xmlns"http://java.sun.com/xml/ns/javaee"xmlns:xsi&qu…

java初始化hashset_JAVA中的Hashset类

HashSet扩展AbstractSet并且实现Set接口。它创建一个类集&#xff0c;该类集使用散列表进行存储。正像大多数读者很可能知道的那样&#xff0c;散列表通过使用称之为散列法的机制来存储信息。在散列(hashing)中&#xff0c;一个关键字的信息内容被用来确定唯一的一个值&#xf…

java集成lucene_将Lucene搜索集成到应用程序中

java集成lucene本文是我们名为“ Apache Lucene基础知识 ”的学院课程的一部分。 在本课程中&#xff0c;您将了解Lucene。 您将了解为什么这样的库很重要&#xff0c;然后了解Lucene中搜索的工作方式。 此外&#xff0c;您将学习如何将Lucene Search集成到您自己的应用程序中…

java经纬度曲线简化_JAVA 后台计算 经纬度 最短距离

1、 代码块package com.ilogie.tms.util;import java.io.IOException;import java.math.BigDecimal;import java.text.MessageFormat;public class LocationUtils {// 以下为 获得 两点之间最短距离private static final BigDecimal EARTH_RADIUS MathUtil.toBigDecimal(6378.…

java ee的小程序_在Java EE应用程序中实现自动重试

java ee的小程序最初&#xff0c;我想将此博客称为“ 具有拦截器驱动的重试策略的灵活超时 ”&#xff0c;但后来我认为它太“繁重”。 该声明以及修改后的标题应该&#xff08;希望&#xff09;使您了解此帖子可能谈论的内容;-) 触发 这篇文章主要由我在较早的一篇文章中收到…

Java变长数组笛卡尔积_Java 8中的流作为流的笛卡尔积(仅使用流)

小编典典在示例中传递流永远比传递列表更好&#xff1a;private static Stream cartesian(BinaryOperator aggregator, List... lists) {...}并像这样使用它&#xff1a;Stream result cartesian((a, b) -> a b,Arrays.asList("A", "B"),Arrays.asLis…

jboss eap 7_EAP 7 Alpha和Java EE 7入门

jboss eap 7红帽JBoss企业应用程序平台7&#xff08;JBoss EAP 7&#xff09;是基于开放标准构建并符合Java Enterprise Edition 7规范的中间件平台。 它建立在WildFly等经过验证的创新开源技术之上&#xff0c;这将使Java EE 7的开发更加容易。 这是有关如何开始使用最新ALPHA…

php 返回页面重复提交,php防止表单重复提交

后端防止重复提交的基本原理:服务器返回表单页面时&#xff0c;会先生成一个subToken保存于session&#xff0c;并把该subToen传给表单页面。当表单提交时会带上subToken&#xff0c;服务器获取表单信息判断session保存的subToken和表单提交subToken是否一致。若不一致或sessio…