航歌 - 做最好的开发者知识平台

留言首页

当前位置：
首页
>
编程社区
>
其他
> layer - 简单好用的Web弹出层组件使用详解5（弹出位置、出场退场动画）

layer - 简单好用的Web弹出层组件使用详解5（弹出位置、出场退场动画）

2018-05-31 发布：hangge 阅读：1587

十、修改弹出位置

（1）默认情况下弹出框是在整个页面居中显示，我们可以通过 offset 属性修改它出现的位置。

值 | 备注
offset: 'auto' | 默认坐标，即垂直水平居中
offset: '100px' | 只定义 top 坐标，水平保持居中
offset: ['100px', '50px'] | 同时定义 top、left 坐标
offset: 't' | 快捷设置顶部坐标
offset: 'r' | 快捷设置右边缘坐标
offset: 'b' | 快捷设置底部坐标
offset: 'l' | 快捷设置左边缘坐标
offset: 'lt' | 快捷设置左上角
offset: 'lb' | 快捷设置左下角
offset: 'rt' | 快捷设置右上角
offset: 'rb' | 快捷设置右下角

（2）下面代码我们将消息提示框显示在窗口顶部。

layer.msg('欢迎访问 hangge.com', {
offset: 't'
});

十一、动画效果

1，弹出动画（anim）

使用 anim 属性可与设置出场动画，目前支持的动画类型有 0 ~ 6。如果不想显示动画，设置 anim: -1 即可。

值 | 备注
anim: 0 | 平滑放大（默认）
anim: 1 | 从上掉落
anim: 2 | 从最底部往上滑入
anim: 3 | 从左滑入
anim: 4 | 从左翻滚
anim: 5 | 渐显
anim: 6 | 抖动

layer.alert('欢迎访问 hangge.com', {
anim: 1 // 出场动画改成从上掉落
});

2，是否显示关闭动画（isOutAnim）
默认情况下，弹出框关闭时会有一个过渡动画。如果我们不想开启，设置 isOutAnim: false 即可。
layer.alert('欢迎访问 hangge.com', {
isOutAnim: false //不需要退场动画
});

上一篇layer - 简单好用的Web弹出层组件使用详解4（弹出自定义内容、iframe）下一篇layer - 简单好用的Web弹出层组件使用详解6（弹出框的样式、参数设置）

打赏支持

评论（0）

提交

文章类别

编程社区
SwiftFlex / FlashHTML5 / CSS3CordovaSpringBoot / CloudDocker / K8sReact / RN其他
奇文共赏

本类相关

Atom - JavaScript Snippets插件的使用详解（js代码自动补全）

通过js获取eWebEditor编辑器的内容

MySQL - utf8mb4字符集设置（解决emoji表情的记录无法保存问题）

CentOS下ZooKeeper的安装教程（单机模式）

CentOS - 修改主机名教程（将 localhost.localdomain 改成其它名字）

Vue.js - Transition过渡动画的使用3（多个元素、组件的过渡）

Three.js - 场景对象 THREE.Scene 使用详解（属性、方法、及样例）

tippy.js - 好用的tooltip提示插件使用详解1（安装配置、基本用法、触发方式）

Vue.js - 路由 vue-router 的使用详解1（安装配置、基本用法）

使用KVM构建虚拟化服务器教程2（在已有的CentOS上安装KVM）

移动版给我留言打赏支持

© copyright 2006-2021 航歌. All rights reserved. 苏ICP备14040777号