JavaScript小白实现简易悬浮层制作(含测试源码)

本博文源于js基础，旨在讨论如何实现js中的悬浮层制作。

问题再现

制作一个悬浮层特效。所谓悬浮层指的是一个绝对定位的div盒子，它像系统对话框一样盖住页面的原有内容。

测试效果

a模拟页面内容
盒子模拟悬浮层

实现原理

只需用一个绝对定位的盒子模拟悬浮层即可，给他设置水平居中、垂直居中。盒子定位完成之后，给他设置display：none，此时盒子变的不可见。
在页面上设置一个按钮“显示悬浮层”，希望点击这个按钮后，能显示悬浮层。悬浮层显示之后，能够点击页面任何地方(除在悬浮层上点击)关闭这个悬浮层

代码区域

代码讲解

按下按钮显示悬浮层很简单，只需要display设置即可，如果点击空白关闭悬浮层那就需要用document对象，document是整个文档。

js初始化获得各种id，然后根据btn按下按钮，阻止阻止事件续传播，然后显示悬浮层。document被点击再次设置display，点击悬浮层的时候也不要把悬浮层关闭，那就给悬浮层做个阻止事件继续传播。

附上代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.superposedlayer {position: absolute;width: 300px;height: 150px;background-color: orange;top:50%;left:50%;margin-left:-300px;margin-top:-150px;display: none;overflow: hidden;}</style></head><body><div class="superposedlayer" id = "superposedlayer">我是悬浮层</div><button id="btn">点我出现悬浮,点空白取消悬浮</button><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p><script type="text/javascript">var btn = document.getElementById("btn");var superposedlayer = document.getElementById("superposedlayer");btn.onclick = function(event) {event.stopPropagation();superposedlayer.style.display = "block";}document.onclick = function() {superposedlayer.style.display = "none";} superposedlayer.onclick = function(event) {event.stopPropagation();}</script></body>
</html>

JavaScript小白实现简易悬浮层制作(含测试源码)相关推荐

js|BMI指数计算(含测试源码)
本博文源于js基础,博主之前写的安卓bmi. Android|BMI体质计算器实现(附测试源码) 再去看今天这道题的标准,其实发现更简单了题目重现 BMI指数是用体重(以千克为单位)除以身高(以米为 ...
[含lw+源码等]javaweb银行柜员业务绩效考核系统
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称 [含lw+源码等]javaweb银行柜员业务绩效考核系统演示视频 ...
[含论文+源码等]高校科研项目管理系统[包运行成功]
源码获取:我的博客资源页面可以下载!!!! 项目名称 [含论文+源码等]高校科研项目管理系统[包运行成功] 系统介绍 <高校科研项目管理系统>该项目采用技术:jsp +servlet + ...
Android 小应用之一个activity实现简易手电筒（内附免费源码）
Android小应用之一个activity实现简易手电筒(内附免费源码) 1.activity代码 2.xml代码 3.资源文件代码 4.源码压缩包(免费) 今天爷爷说他手机更新之后找不到手电筒了,我 ...
较高人工智能的人机博弈程序实现(多个算法结合)含C++源码
较高人工智能的人机博弈程序实现(多个算法结合)含C++源码本文由恋花蝶最初发表于http://blog.csdn.net/lanphaday 上,您可以转载.引用.打印和分发等,但必须保留本文完整和 ...
Android Input子系统-含实例源码
Android Input子系统-含实例源码 1 Input子系统作用 Android很多外设都是用到输入输出设备,比如touchscreen,键盘,音量键等,输入设备对应Android 框架是An ...
【图像去噪】基于matlab小波滤波（硬阙值+软阙值）+中值滤波图像去噪【含Matlab源码 462期】
一.获取代码方式获取代码方式1: 完整代码已上传我的资源:[图像去噪]基于matlab小波滤波(硬阙值+软阙值)+中值滤波图像去噪[含Matlab源码 462期] 获取代码方式2: 通过订阅紫极神光 ...
Android实现车辆检测(含Android源码可实时运行)
Android实现车辆检测(含Android源码可实时运行) 目录 Android实现车辆检测(含Android源码可实时运行) 1. 前言 2. 车辆检测数据集说明 3. 基于YOLOv5的车辆 ...
【缺陷检测】基于matlab AlexNet和SVM异常螺母检测【含Matlab源码 2147期】
一.获取代码方式获取代码方式1: 完整代码已上传我的资源: [缺陷检测]基于matlab形态学水果蔬菜缺陷检测[含Matlab源码 820期] 点击上面蓝色字体,直接付费下载,即可. 获取代码方式2 ...