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 ...
随机推荐
- 64_s3
sugar-toolkit-gtk3-devel-0.110.0-2.fc26.i686.rpm 13-Feb-2017 10:56 22626 sugar-toolkit-gtk3-devel-0. ...
- 【转载】如何解决failed to push some refs to git
在使用git 对源代码进行push到gitHub时可能会出错,信息如下 此时很多人会尝试下面的命令把当前分支代码上传到master分支上. $ git push -u origin master ...
- C# 加密解密以及sha256不可逆加密案例
class Program { static void Main(string[] args) { string aa = "身份证"; string bb = "key ...
- 集合框架之Map学习
Map接口的实现类有HashTable.HashMap.TreeMap等,文章学习整理了“ Map和HashMap的使用方法”. /** * Map和HashMap的使用方法 */public sta ...
- 网络管理 SNMP基础知识
SNMP Agent快速开发 网友:SmileWolf 发布于: 2007.08.02 16:06 (共有条评论) 查看评论 | 我要评论 摘自 http:/ ...
- 用递归法计算从n个人中选选k个人组成一个委员会的不同组合数
用递归法计算从n个人中选选k个人组成一个委员会的不同组合数. 分析 由n个人里选k个人的组合数= 由n-1个人里选k个人的组合数+由n-1个人里选k-1个人的组合数: 当n = k或k = 0时,组合 ...
- 【PAT】1005. 继续(3n+1)猜想 (25)
1005. 继续(3n+1)猜想 (25) 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中 ...
- mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout ...
- [实战]MVC5+EF6+MySql企业网盘实战(10)——新建文件夹
写在前面 上篇文章更新了编辑了文件名的操作,本片文章将实现新建文件夹的功能. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战 ...
- Nuxt 2.0 需要将pug-loader改成pug-plain-loader
Nuxt 2.0 需要将pug-loader改成pug-plain-loader npm i pug-plain-loader -D 解决问题!! 参考链接 https://my.oschina.ne ...