今天做项目,出现一个问题,需求是用ajax做文件上传功能,代码写好之后,测试发现问题。

弹出层出现以后我没有主动点击确定和关闭等操作,程序自动关闭了弹出层

一步一步排查,找到了错误,首先,先确认你页面上有没有发生刷新或者其他弹出

我排查以后发现我form里有个class,这个class就是ajax提交并返回弹出框,我把这个class

去掉以后测试还是不行,继续排除,后来发现是button 的type问题,话不多说,直接上代码

<--前端代码-->
<form id="uploadForm" class="form-horizontal" enctype="multipart/form-data">
<input type="file" name="file" class="file" multiple="multiple" required="">
<button type="button" id="upload" class="btn btn-xs btn-purple">
  <span class="ace-icon fa fa-cloud-upload icon-on-right bigger-110"></span>上传文件
  </button>
</form>
<--JS代码-->
<script type="text/javascript">
$(function () {
$('#upload').click(function () {
       //这里我是需要做一个加载转圈的效果,如不需要可去除
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
url:"www.baidu.com",
type:'post',
data:formData,
dataType:'json',
cache:false,
processData: false,
contentType: false,
success:function (e) {
layer.close(index);
if (e.status == 200)
{
layer.alert(e.msg, {
icon: 1,
skin: 'layer-ext-moon'
}) }else
{
layer.alert(e.msg, {
icon: 2,
skin: 'layer-ext-moon'
})
}
}
});
});
});
</script>

参考资料:http://fly.layui.com/jie/1106/

解决了,欢迎评论,一起进步一起学习。

layer弹框,弹出后自动关闭的更多相关文章

  1. layer倒计时弹框/弹层 DEMO

    layer.msg("提示语...", { time: 5000, shade: 0.6, success: function (layero, index) { var msg ...

  2. 鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  3. 移动端ios升级到11及以上时,手机弹框输入光标出现错位问题

    引起原因:弹框的定位采取position:fixed,而ios(safari)对定位属性position:fixed的解析不一致导致. 解决方案: 方案一 一开始上网找解决方案,找到如下处理方式.但存 ...

  4. 简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery)

    弹出弹框 效果展示 实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.b ...

  5. html自定义弹框

    一.要实现的功能 1.弹框弹出时有遮罩 2.弹框内的文字过多时右侧有滚动条 3.根据执行结果变更弹框title的样式   二.具体实现 思路:定义一个有宽高的div,默认隐藏,当要显示时,设置为dis ...

  6. UI自动化之特殊处理二(弹框\下拉框\选项\文件上传)

    弹框\下拉框\选项\文件上传也是一些比较特殊的操作 目录 1.弹框 2.下拉框 3.选项 4.文件上传 1.弹框 弹框有三种形式,value为alert.confirm.prompt三种的弹框,第一个 ...

  7. vue 弹框产生的滚动穿透问题

    首先定义一个全局样式: .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件,定义几个方法: export ...

  8. layer.msg如何让按钮的回调执行完毕后弹框不自动关闭

    问题出现:我点击“确定”时会验证“新手机号码”,如果验证不通过则不给该弹框关掉,但是实际操作时,不管验证怎么样,点击“确定”之后该弹框都会关掉. 之前的写法: layer.open({         ...

  9. layer弹出框确定前验证:弹出消息框(弹出两个layer)

    作者QQ:1095737364 QQ群:123300273 欢迎加入! layer 弹出框中经常遇到要弹出表单进行修改数据, 因此在弹出框中的表单需要验证数据, 就需要在弹出一个layer, 默认的设 ...

  10. layer icon样式及 一些弹框使用方法

    一.layer的icon样式 以上样式测试代码: layer.confirm('icon测试', {icon: 1, title:'提示'}, function(index){ //do someth ...

随机推荐

  1. JAVA 之 Tomcat知识框架【转】

    一.Tomcat服务器(很熟悉) 1.Web开发概述 javaSE: javaEE:13种 javaME: JavaEE规范: 13种技术的总称.Servlet/Jsp JDBC JNDI JTA.. ...

  2. 百度2017春招<空间中最大三角形面积的问题>

    题目: 三维空间中有N个点,每个点可能是三种颜色的其中之一,三种颜色分别是红绿蓝,分别用'R', 'G', 'B'表示. 现在要找出三个点,并组成一个三角形,使得这个三角形的面积最大.但是三角形必须满 ...

  3. Codeforces 822D My pretty girl Noora(最小素因子的性质)

    题目大意:一场选美比赛有N个人,可以分成N/x,每组x人.每组的比较次数为x(x-1)/2,f[N]为最后决出冠军所需的比较次数,可以通过改变x的值使f[N]改变.题目给出t,l,r(1 ≤ t &l ...

  4. php强制输出到浏览器下载

    $file_name="test.mp3"; $mp3_url = "";header( "Pragma: public" );header ...

  5. 专题-Delphi/C++ Builder多线程编程与调试

    [目录] Delphi.C++ Builder多线程程序编码调试的一点经验谈 多线程程序的填坑笔记和多线程编程应该遵循的规则(天地弦) 多线程编程中死锁问题的跟踪与解决 临界.多重读独占写多线程同步测 ...

  6. Python/Anaconda多版本共存的解决方案

    博客中的文章均为 meelo 原创,请务必以链接形式注明 本文地址 虽然Python2大势已去,众多项目都已经支持Python3,但总有一些教程和项目只支持Python2.通常情况是计算机里既装着Py ...

  7. 【PAT】1008. 数组元素循环右移问题 (20)

    1008. 数组元素循环右移问题 (20) 一个数组A中存有N(N>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(M>=0)个位置,即将A中的数据由(A0A1……AN- ...

  8. intellij自动生成java代码注释(java文件注释和方法注释)

    1定义java文件头部的注释 2给java类中的方法添加上注释 2.1第一步勾选Enable Live  Templates 2.2第二步新建一个Group 2.3第三步新建一个Template 2. ...

  9. list 移除值

    1. 移除基本类型值时,传入int 会以下标为依据移除 , 但传入Integer 对象时,则是移除对象为依据移除(即不受此对象代表的值相等的下标的影响) 都是只能移除一个值,(list 中有多个1时, ...

  10. HDU - 4777 离线树状数组

    离线树状数组搞一搞. #include<bits/stdc++.h> #define LL long long #define fi first #define se second #de ...