类似Dialog的Layer

最新推荐文章于 2016-04-23 20:04:00 发布

bradwoo8621

最新推荐文章于 2016-04-23 20:04:00 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS/Script 文章标签： dialog layer javascript html button filter

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/bradwoo8621/article/details/1737582

HTML/CSS/Script 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种通过HTML和JavaScript实现网页遮罩层的方法。点击按钮后，一个全屏白色半透明层显示在页面上，阻止用户对底层内容的操作。文章提供了具体的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们可以看到一些网页上点击某个按钮以后出现一个层将所有的版面的覆盖，下面的东西就没有办法操作了。

最近学习了一下，应该说还是挺简单的。

网上也能找到类似的文章，可能写的比我好多了，呵呵，我只是为了记录一下而已。

<html>

<head>

<style type="text/css">...

.shown {

z-index: 100;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

display: block;

background-color: white;

filter: alpha(opacity = 60);

opacity: 0.6;

position: absolute;

}

</style>

<script language="javascript">...

<!--

function call() {

var layer = document.getElementById("full");

layer.className = "shown";

}

//-->

</script>

</head>

<body>

<div id="full"></div>

<input type="button" value="call a layer" onclick="call();">

</body>

</html>

评论 3

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。