A mask of the web~

最新推荐文章于 2024-09-24 20:13:26 发布

原创最新推荐文章于 2024-09-24 20:13:26 发布 · 768 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #generator #button

Javascript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种简单的网页遮罩层实现方法，通过HTML与JavaScript结合，能够快速创建并显示带有透明度效果的遮罩层，适用于弹窗或加载提示等场景。

this is a simple realization of mask. the code as below:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
#mask {
    position: absolute;
    visibility:  hidden;
    background: #000;
    z-index: 99999;
    left: 0px;
    top: 0px;
    filter: alpha(opacity=80);
    text-align: center;
}
</style>
<script type="text/javascript">
var o;
function showMask() {
    o = document.getElementById("mask");
    o.style.visibility = "visible";
    o.style.height = window.screen.availHeight;
    o.style.width = window.screen.availWidth;
}
function closeMask() {
    o = document.getElementById("mask");
    o.style.visibility = "hidden";
}
</script>
</head>
<body>
<div id="mask"><input type="button" value="close" onclick="closeMask()" /></div>
<input type="button" value="showMask" onclick="showMask()" />
</body>
</html>