html5 原生 弹窗,HTML5 Popmotion.js实现的弹窗控件
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
const { css, transform, chain, delay, tween, easing, parallel } = window.popmotion;
const { interpolate } = transform;
let trigger;
let isClosing = false;
// Select DOM
const modalTriggersDom = document.querySelectorAll('.modal-trigger');
const dimmer = document.querySelector('.overlay');
const modalContainer = document.querySelector('.modal-container');
const modal = document.querySelector('.modal');
// Create CSS renderers
const dimmerRenderer = css(dimmer);
const modalContainerRenderer = css(modalContainer);
const modalRenderer = css(modal);
// Return the center x, y of a bounding box
function findCenter({ top, left, height, width }) {
return {
x: left + (width / 2),
y: top + (height / 2)
};
}
/*
Generate a function that will take a progress value (0 - 1)
and use that to tween the modal from the source to the destination
bounding boxes
*/
const vRange = [0, 1];
function generateModalTweener(sourceBBox, destinationBBox) {
const sourceCenter = findCenter(sourceBBox);
const destinationCenter = findCenter(destinationBBox);
const toX = interpolate(vRange, [sourceCenter.x - destinationCenter.x, 0]);
const toY = interpolate(vRange, [sourceCenter.y - destinationCenter.y, 0]);
const toScaleX = interpolate(vRange, [sourceBBox.width / destinationBBox.width, 1]);
const toScaleY = interpolate(vRange, [sourceBBox.height / destinationBBox.height, 1]);
return (v) => modalRenderer.set({
opacity: v,
x: toX(v),
y: toY(v),
scaleX: toScaleX(v),
scaleY: toScaleY(v)
});
}
function openModal(e) {
if (e.target && e.target.classList.contains('modal-trigger')) {
trigger = e.target;
// Get bounding box of triggering element
const triggerBBox = trigger.getBoundingClientRect();
// Temporarily show modal container to measure modal
dimmerRenderer.set('display', 'block').render();
modalContainerRenderer.set('display', 'flex').render();
modalRenderer.set('opacity', 0).render();
// Get bounding box of final modal position
const modalBBox = modal.getBoundingClientRect();
// Get a function to tween the modal from the trigger
const modalTweener = generateModalTweener(triggerBBox, modalBBox);
// Fade in overlay
tween({
duration: 200,
onUpdate: (v) => dimmerRenderer.set('opacity', v)
}).start();
chain([
delay(75),
tween({
duration: 200,
ease: easing.easeOut,
onUpdate: modalTweener
})
]).start();
}
}
function closeComplete() {
isClosing = false;
dimmerRenderer.set('display', 'none').render();
modalContainerRenderer.set('display', 'none').render();
modalRenderer.set({
y: 0,
scaleX: 1,
scaleY: 1,
transformOrigin: '50% 50%'
});
}
function cancelModal(e) {
if (e.target && e.target.classList.contains('cancel-modal') && !isClosing) {
e.stopPropagation();
isClosing = true;
const triggerBBox = trigger.getBoundingClientRect();
const modalBBox = modal.getBoundingClientRect();
const modalTweener = generateModalTweener(triggerBBox, modalBBox);
parallel([
tween({
from: dimmerRenderer.get('opacity'),
to: 0,
onUpdate: (v) => dimmerRenderer.set('opacity', v)
}),
tween({
from: modalRenderer.get('opacity'),
to: 0,
duration: 250,
onUpdate: modalTweener,
onComplete: closeComplete
})
]).start();
}
}
function submitModal(e) {
if (isClosing) return;
e.stopPropagation();
isClosing = true;
const toScaleXIn = interpolate(vRange, [1, 1.2]);
const toScaleYIn = interpolate(vRange, [1, 0.8]);
const toScaleXOut = interpolate(vRange, [1.2, 0.5]);
const toScaleYOut = interpolate(vRange, [0.8, 2]);
chain([
tween({
onStart: () => modalRenderer.set('transform-origin', '50% 100%'),
duration: 200,
onUpdate: (v) => modalRenderer.set({
scaleX: toScaleXIn(v),
scaleY: toScaleYIn(v),
y: v * 100
})
}),
parallel([
tween({
from: dimmerRenderer.get('opacity'),
to: 0,
onUpdate: (v) => dimmerRenderer.set('opacity', v)
}),
tween({
onUpdate: (v) => modalRenderer.set({
opacity: 1 - v,
scaleX: toScaleXOut(v),
scaleY: toScaleYOut(v),
y: - 300 * easing.easeIn(v)
}),
duration: 200,
onComplete: closeComplete
})
])
]).start();
}
document.addEventListener('click', openModal);
document.addEventListener('click', cancelModal);
document.querySelector('.submit').addEventListener('click', submitModal);
html5 原生 弹窗,HTML5 Popmotion.js实现的弹窗控件相关推荐
- layui日期与vue_详解Vue.js和layui日期控件冲突问题解决办法
详解Vue.js和layui日期控件冲突问题解决办法 发布于 2020-8-10| 复制链接 摘记: 事故还原: 今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果 ...
- js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件
js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件 参考文章: (1)js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) ...
- html弹窗可以关闭,js 点击弹窗以外 关闭弹窗
layer点击自定义按钮关闭对应的弹窗,layer如何关闭弹窗 首先自定义一个变量 点击 Btn 按钮,弹出弹窗(将弹窗事件赋给自定义的变量名) 我是标题 一.实现弹窗原理: 弹窗的实现: ...
- 页面JS获取不到控件ID
为了使页面更加的友好,我们不可避免的要在页面上使用JS,所以在页面上使用javascript获取控件ID是很常见的事情.但是最近在使用JS的使用,遇到了一件让我很头疼的事情,在获取控件ID时,抱错了, ...
- 【ASP.NET】js动态生成的控件,在后台获取不到怎么办?
JS代码如下: oNewNode.innerHTML = " <input type=file id=file"+filecount+" οnchange=per ...
- js swipe 图片滑动控件实现 任意尺寸适用任意屏幕
http://www.swiper.com.cn/ http://www.idangero.us/swiper/demos/ 解决问题点: 1.先得到图片真实的宽高, 根据真实宽高 等比例 2.调用的 ...
- auto.js B0013 查找父控件子控件进入阅读文章视频学习每日答题2021-10-03
log("$$$$$$$$$$$$$$$$$$$$$$$$$$$") var list=className("android.widget.ListView") ...
- 30 Three.js的相机飞行控件FlyControls
简介 FlyControls是相机的控件,飞行模拟器控件,用键盘和鼠标控制相机移动和旋转.这个控件使用可以把相机想象成是无人机的摄像头. 案例查看地址:http://www.wjceo.com/blo ...
- three.js使用轨迹球控件TrackballControls控制相机(vue中使用three.js62)
使用TrackballControls控制相机 1.demo效果 2.TrackballControls介绍 2.1 TrackballControls操控说明 2.2 TrackballContro ...
最新文章
- linux(armv7/8)下gdb的安装及查看方法
- 成功解决pyinstaller生成exe缺少各种包的问题
- c#基类 常用数据验证的封装,数字,字符,邮箱的验证
- 网易云信与林鹿科技联手推出云对讲服务
- DedeCMS生成首页html静态文件的教程
- Angular 如何根据一个 class 的定义和数据,动态创建一个该类的实例
- linux 运行cmd文件,cmd文件如何在虚拟linux下运行
- 一文读懂机器学习的常用模型评价指标
- gcc的警告提示信息
- Android学习笔记:短信控制手机之“短信开启定位”
- python标注工具_Python labelImg 图像标注工具安装及使用教程windows版(亲测有效)
- 【java】java Integer 缓存 一定是 -128~127 吗
- 核心对象+持久对象全析(2)
- java 守护进程 linux_Java使用appache deamon实现linux守护进程
- Visitor模式学习
- linux之iptables详解及配置
- 【工作感想】 关于前后端分离的问题
- 移动端 网易云 左右滚动导航栏
- 其实,我几乎很少看书!
- 四大展会将“亮剑”义乌 谱写贸易交流新“篇章”