摘要:背景官网有个对话框组件如图如果哪天不能用框架了不能用组件了只能用原生写页面现在的我可能要一个页面写一年目标用原生完成这个页面弹框处于垂直居中状态且点击弹框外任意区域关闭弹框写了很久很久时间就不说了遇到的最难的问题就是不知道怎么关闭弹框后面还
背景:Ant官网有个对话框Model组件.如图:
如果哪天不能用框架了,不能用组件了.只能用原生写页面.. 现在的我可能要一个页面写一年
目标:用原生js完成这个页面.弹框处于垂直居中状态,且点击弹框外任意区域关闭弹框.写了很久很久...时间就不说了...
遇到的最难的问题就是:不知道怎么关闭弹框.
后面还是问了旁边的同事,教我用了document.querySelector()和.classList()还有addEventListener()
百度了一下它们的用法:
document.querySelector():
addEventListener():
classList():
我的理解是:先匹配对象,再设置监听器.把设置了隐藏属性的css代码添加进去.最后利用stopPropagation()方法阻止弹框冒泡.
可能理解的不是很好..大概就是这个意思...
如果有对这几个方法理解比较好的..可以留下评论给我参考一下..谢谢 - 0 -
附上最终代码和结果图:
代码:
弹框和遮罩层
我是页面
我是遮罩层
标题
今天学习原生js
- const el = document.querySelector(".bg")
- el.addEventListener("click", () => {
- el.classList.add("active")
- })
- document.querySelector(".point").addEventListener("click", (e) => {
- e.stopPropagation()
- })
最终效果图:
一进页面的样子:
点击除了白色弹框任意位置:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/116326.html
摘要:背景官网有个对话框组件如图如果哪天不能用框架了不能用组件了只能用原生写页面现在的我可能要一个页面写一年目标用原生完成这个页面弹框处于垂直居中状态且点击弹框外任意区域关闭弹框写了很久很久时间就不说了遇到的最难的问题就是不知道怎么关闭弹框后面还 背景:Ant官网有个对话框Model组件.如图: showImg(https://segmentfault.com/img/bVbwMCG?w=1...
摘要:当弹框弹出时原页面内容不能滚动,即将样式设为原页面的内容就不会动了当弹框关闭后再将样式改为默认的中的写一个函数,再在弹框的中调用函数。弹出弹框 效果展示 实现原理 html结构比较简单,即: 遮罩层 弹框 先写覆盖显示窗口的遮罩层div.box,因为要在整个窗口显示固定,所以position要设为fixed,background设为灰色半透明,由于要遮住整个显示屏,...
摘要:第一种情况比较简单,弹框和页面都不可滚动第二种情况是弹框可滚动,页面不可滚动移动端兼容性不好,可应用于端适用于移动端记录开始滑动的坐标,用于判断滑动方向未开始,已开始,滑动中核心部分判定一次就够 第一种情况比较简单,弹框和页面都不可滚动 this is a box this is a box this is a box ...
摘要:第一种情况比较简单,弹框和页面都不可滚动第二种情况是弹框可滚动,页面不可滚动移动端兼容性不好,可应用于端适用于移动端记录开始滑动的坐标,用于判断滑动方向未开始,已开始,滑动中核心部分判定一次就够 第一种情况比较简单,弹框和页面都不可滚动 this is a box this is a box this is a box ...
阅读 3538·2023-04-25 22:45
阅读 1327·2021-11-11 16:54
阅读 2831·2019-08-30 15:44
阅读 3222·2019-08-30 15:44
阅读 1682·2019-08-30 13:55
阅读 989·2019-08-29 18:45
阅读 1233·2019-08-29 17:25
阅读 1048·2019-08-29 12:59
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要