简单遮罩实现点击按钮遮住整个页面

最新推荐文章于 2021-07-07 15:55:14 发布

fighting-ff

最新推荐文章于 2021-07-07 15:55:14 发布

阅读量1.9k

点赞数

分类专栏： JavaScript 文章标签： javascript filter 遮罩

本文链接：https://blog.csdn.net/i99121570/article/details/24842623

版权

这篇博客展示了如何使用JavaScript动态创建一个全屏遮罩层，并在页面上添加一个点击按钮，当点击该按钮时，遮罩层会显示出来覆盖整个页面。遮罩层还包含一个关闭按钮，点击后可以隐藏遮罩层。实现中涉及到DOM操作、事件监听以及CSS透明效果的应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>

</style>
<script type="text/javascript" language="javascript">

function showBox() {
var exits = document.getElementById("div_whole");
if (exits) { document.body.removeChild(exits); }
var scrollTop = document.documentElement.scrollTop;
var vis_y = document.documentElement.clientHeight + scrollTop;
var vis_x = document.documentElement.clientWidth ;
var odiv = document.createElement("div");
odiv.innerHTML = "<div style='