用原生js写出一个弹框+遮罩层的页面,完成弹框垂直居中页面且点击弹框外任何区域去掉弹框和遮罩层的功能

betacat 发布于2019-08-30 15:44 / 2788人阅读

摘要：背景官网有个对话框组件如图如果哪天不能用框架了不能用组件了只能用原生写页面现在的我可能要一个页面写一年目标用原生完成这个页面弹框处于垂直居中状态且点击弹框外任意区域关闭弹框写了很久很久时间就不说了遇到的最难的问题就是不知道怎么关闭弹框后面还

背景:Ant官网有个对话框Model组件.如图:

如果哪天不能用框架了,不能用组件了.只能用原生写页面.. 现在的我可能要一个页面写一年

目标:用原生js完成这个页面.弹框处于垂直居中状态,且点击弹框外任意区域关闭弹框.

写了很久很久...时间就不说了...
遇到的最难的问题就是:不知道怎么关闭弹框.
后面还是问了旁边的同事,教我用了document.querySelector()和.classList()还有addEventListener()
百度了一下它们的用法:
document.querySelector():

addEventListener():

classList():

我的理解是:先匹配对象,再设置监听器.把设置了隐藏属性的css代码添加进去.最后利用stopPropagation()方法阻止弹框冒泡.
可能理解的不是很好..大概就是这个意思...
如果有对这几个方法理解比较好的..可以留下评论给我参考一下..谢谢 - 0 -

附上最终代码和结果图:

代码:

最终效果图:

一进页面的样子:

点击除了白色弹框任意位置:

GPU云服务器云服务器弹框遮罩关于页面弹框功能实现 js弹出一个遮罩层点击弹出遮罩层

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116326.html

用原生js写出一个弹框+遮罩层的页面,完成弹框垂直居中页面且点击弹框外任何区域去掉弹框和遮罩层的功能

摘要：背景官网有个对话框组件如图如果哪天不能用框架了不能用组件了只能用原生写页面现在的我可能要一个页面写一年目标用原生完成这个页面弹框处于垂直居中状态且点击弹框外任意区域关闭弹框写了很久很久时间就不说了遇到的最难的问题就是不知道怎么关闭弹框后面还背景:Ant官网有个对话框Model组件.如图: showImg(https://segmentfault.com/img/bVbwMCG?w=1...

CoderDock 2019-08-26 10:59 评论0 收藏0
简单实现弹出弹框页面背景半透明灰，弹框内容可滚动原页面内容不可滚动的效果(JQuery)

摘要：当弹框弹出时原页面内容不能滚动，即将样式设为原页面的内容就不会动了当弹框关闭后再将样式改为默认的中的写一个函数，再在弹框的中调用函数。弹出弹框效果展示实现原理 html结构比较简单，即：遮罩层弹框先写覆盖显示窗口的遮罩层div.box，因为要在整个窗口显示固定，所以position要设为fixed，background设为灰色半透明，由于要遮住整个显示屏，...

番茄西红柿 2019-04-23 11:51 评论0 收藏0
遮罩层 弹框页面滚动

摘要：第一种情况比较简单，弹框和页面都不可滚动第二种情况是弹框可滚动，页面不可滚动移动端兼容性不好，可应用于端适用于移动端记录开始滑动的坐标，用于判断滑动方向未开始，已开始，滑动中核心部分判定一次就够第一种情况比较简单，弹框和页面都不可滚动 this is a box this is a box this is a box ...

lily_wang 2019-08-29 16:27 评论0 收藏0
遮罩层 弹框页面滚动

摘要：第一种情况比较简单，弹框和页面都不可滚动第二种情况是弹框可滚动，页面不可滚动移动端兼容性不好，可应用于端适用于移动端记录开始滑动的坐标，用于判断滑动方向未开始，已开始，滑动中核心部分判定一次就够第一种情况比较简单，弹框和页面都不可滚动 this is a box this is a box this is a box ...

Pluser 2019-08-26 12:15 评论0 收藏0