layer弹框,弹出后自动关闭
今天做项目,出现一个问题,需求是用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弹框,弹出后自动关闭的更多相关文章
- layer倒计时弹框/弹层 DEMO
layer.msg("提示语...", { time: 5000, shade: 0.6, success: function (layero, index) { var msg ...
- 鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用
今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...
- 移动端ios升级到11及以上时,手机弹框输入光标出现错位问题
引起原因:弹框的定位采取position:fixed,而ios(safari)对定位属性position:fixed的解析不一致导致. 解决方案: 方案一 一开始上网找解决方案,找到如下处理方式.但存 ...
- 简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery)
弹出弹框 效果展示 实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.b ...
- html自定义弹框
一.要实现的功能 1.弹框弹出时有遮罩 2.弹框内的文字过多时右侧有滚动条 3.根据执行结果变更弹框title的样式 二.具体实现 思路:定义一个有宽高的div,默认隐藏,当要显示时,设置为dis ...
- UI自动化之特殊处理二(弹框\下拉框\选项\文件上传)
弹框\下拉框\选项\文件上传也是一些比较特殊的操作 目录 1.弹框 2.下拉框 3.选项 4.文件上传 1.弹框 弹框有三种形式,value为alert.confirm.prompt三种的弹框,第一个 ...
- vue 弹框产生的滚动穿透问题
首先定义一个全局样式: .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件,定义几个方法: export ...
- layer.msg如何让按钮的回调执行完毕后弹框不自动关闭
问题出现:我点击“确定”时会验证“新手机号码”,如果验证不通过则不给该弹框关掉,但是实际操作时,不管验证怎么样,点击“确定”之后该弹框都会关掉. 之前的写法: layer.open({ ...
- layer弹出框确定前验证:弹出消息框(弹出两个layer)
作者QQ:1095737364 QQ群:123300273 欢迎加入! layer 弹出框中经常遇到要弹出表单进行修改数据, 因此在弹出框中的表单需要验证数据, 就需要在弹出一个layer, 默认的设 ...
- layer icon样式及 一些弹框使用方法
一.layer的icon样式 以上样式测试代码: layer.confirm('icon测试', {icon: 1, title:'提示'}, function(index){ //do someth ...
随机推荐
- elk系列7之通过grok分析apache日志【转】
preface 说道分析日志,我们知道的采集方式有2种: 通过grok在logstash的filter里面过滤匹配. logstash --> redis --> python(py脚本过 ...
- Lempel-Ziv algorithm realization
Lempel-Ziv 复杂度程序 随着人们对非线性方法的分析越加深入,他们发现,虽然关联维度和最大李雅谱诺夫指数在分析脑电时具有一定的帮助,但是它们对数据的依赖性太强,对干扰和噪 声太敏感,而且要得到 ...
- MySQL 约束类型
约束是一种限制,它通过对表的行或列的数据做出限制,来确保表的数据的完整性.唯一性. MYSQL中,常用的几种约束: 约束类型: 主键 外键 唯一 非空 自增 默认值 关键字: primary key ...
- ansible安装配置及最佳实践roles
ansible是什么? ansible是一款轻量级配置管理工具,用于远程批量部署.安装.配置.类似的还有puppet.saltstack,各有所长,任君自选. 官方文档:http://docs.ans ...
- python-unittest学习
在说unittest之前,先说几个概念: TestCase 也就是测试用例 TestSuite 多个测试用例集合在一起,就是TestSuite TestLoader是用来加载TestCase到Test ...
- Linux下var目录介绍
var目录 /var 包括系统运行时要改变的数据.其中包括每个系统是特定的,即不能够与其他计算机共享的目录,如/var/log,/var/lock,/var/run.有些目录还是可以与其他系统共享,如 ...
- javascript练习(二)
案例 输出100个数字 案例 打印100以内 7的倍数 案例 打印100以内的奇数 案例 打印100以内所有偶数的和 打印图形 ********** ********** ********** ...
- numpy中min函数
numpy提供的数组功能比较常用,NumPy中维数被称为轴,轴数称为秩. import numpy as np 比如a = np.array([[1, 5, 3], [4, 2, 6]]) a.min ...
- Asp.net vNext 学习之路(二)
View component(视图组件)应该是MVC6 新加的一个东西,类似于分部视图.本文将演示在mvc 6中 怎么添加视图组件以及怎么在视图中注入一个服务. 本文包括以下内容: 1,创建一个新的a ...
- LoadRunner的Capture Level说明
LoadRunner的Capture Level说明 Capture Level的设置说明: 1.Socket level data. Capture data using trapping on t ...