Html之遮罩层

最新推荐文章于 2023-07-22 17:01:56 发布
最新推荐文章于 2023-07-22 17:01:56 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： html5 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45834006/article/details/105859398
版权

复制即用

<html>
<head lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            .black_overlay {
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: #c8c8c8;
                z-index: 1001;
                -moz-opacity: 0.8;
                opacity: .80;
                filter: alpha(opacity=78);
            }

            .pop_win {
                display: none;
                position: absolute;
                top: 10%;
                left: 23%;
                width: 55%;
                height: 75%;
                padding: 10px;
                border: 2px solid rebeccapurple;
                background-color: white;
                z-index: 9999;
                overflow: auto;
            }
        </style>
        <script type="text/javascript">
            function popWin() {
                document.getElementById('light').style.display = 'block';
                document.getElementById('fade').style.display = 'block'
            }

            function closeWin() {
                document.getElementById('light').style.display = 'none';
                document.getElementById('fade').style.display = 'none'
            }
        </script>
    </head>
<body>
<p>网页：单击按钮弹出悬浮窗+页面遮罩</p>
<a href="javascript:void(0)" οnclick="popWin();">请点这里</a>

<div id="light" class="pop_win">
    <a href="javascript:void(0)" οnclick="closeWin();" style="float: right;">[x]</a>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
缘不易
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML遮罩层实现源码
03-25
HTML遮罩层实现源码，包括html、js、css和图片，并结合loading提示和DIV模拟模态窗口的示例展示遮罩层的使用
html遮盖层
fangwenzheng88的博客
09-13 1485
、在html的body中添加如下代码： 1 2 3 4 5 6 7 8 div class="modal fade" id="loadingModal">     div style="width: 200px;height:20px; z-index: 20000; position: absolut
html遮罩层
01-09
一款很好看的遮罩层 可以用于ajax post请求前的遮罩！
html遮罩层实现
weixin_30886233的博客
09-04 275
html文件内容如下 <!--调出子窗口按钮--> <button class="add" onclick="addClick();">新增</button> <!--子窗口--> <div id="addBox" class="addBox"> <a href="javascript:;" onclick="...
HTML实现遮罩层的方法 HTML中如何使用遮罩层
同学小江的博客
12-23 5285
Web页面中使用遮罩层，可防止重复操作，提示loading；也可以模拟弹出模态窗口。 实现思路：一个DIV作为遮罩层，一个DIV显示loading动态GIF图片。在下面的示例代码中，同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。 示例代码： index.html XML/HTML Code复制内容到剪贴板 >  html lang="zh-CN">  head>
js+html5实现半透明遮罩层弹框效果
10-19
本文主要介绍如何利用JavaScript与HTML5实现具有半透明效果的遮罩层弹框。遮罩层弹框是前端开发中常见的交互效果，它通常用于在用户进行某些操作时，显示在页面上层的半透明遮罩，以提示用户当前状态或者用于表单...
HTML遮罩层实例
08-09
根据提供的文件信息，我们可以分析并总结出与“HTML遮罩层实例”相关的知识点。尽管给定的部分内容没有直接展示遮罩层的实现方法，我们可以通过分析文件头及其他相关信息推测其可能涉及的技术点，并据此展开讨论。 ...
HTML 遮罩层
qq_36935391的博客
09-10 1206
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; /*&lt;!--首先确定遮罩层的大小--
网页制作 HTML实现遮罩层的方法 HTML中如何使用遮罩层
11-13 6323
网页制作 HTML实现遮罩层的方法 HTML中如何使用遮罩层 Web页面中使用遮罩层，可防止重复操作，提示loading；也可以模拟弹出模态窗口。 实现思路：一个DIV作为遮罩层，一个DIV显示loading动态GIF图片。在下面的示例代码中，同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。 示例代码： index.html XML/HTML Code复制内容到剪贴板 > <htmllang="zh-CN"> <head> <metachars
html弹出框+遮罩层
04-17
看到网上有很多伙伴在求这东西，这里发一个。
html 锁定页面(js遮罩层弹出div效果)
12-12
代码如下:<htmlxmlns> &lt;head&gt; &lt;meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″/&gt; &lt;title&gt;UntitledDocument&lt;/title&gt; [removed] function createIframe(){ //mask遮罩层 var newMask=document.createElement(“div”); newMask.id=”mDiv”; newMask.style.position=”absolute”; ne
几种漂亮的html遮罩效果
10-15
几种漂亮的html遮罩效果
html页面添加遮罩层,在浏览器窗口上添加遮罩层的方法
weixin_28744613的博客
06-03 3472
如何在浏览器窗口上添加一个遮罩层背景在web2.0中，页面弹窗是一个很常见的交互方式，这样既可以避免不必要的页面跳转，也可以改进界面的布局和可交互性。但是，浏览器原生的弹窗函数(alert, confirm, prompt)有着很大的局限性，主要是它们的展现UI一来很不美观，二来也不够灵活，因此，我们经常需要自行定义弹窗函数。当我们要实现一个模式弹窗时(模式弹窗，即是说出现弹窗时，页面其它地方不可...
html遮罩层样式,遮罩层样式
weixin_33976326的博客
06-01 506
.shade{width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;z-index: 5000;background: #000;opacity: 0.7;}要遮罩的内容中还有下拉框，不用iframe的话，盖不住下拉框。 使用了宽和高都为100%的iframe后，用了后会导致背景色和文字颜色等失效。//隐藏sele...
HTML-简单的遮罩层实现
rui_1129的博客
07-03 715
CSS部分<style type="text/css"> #mask { display:none; background-color:#000; width:100%; height:100%; top:0; left:0; position:absolute; opacity:0.5; /*兼容IE8及以下版本浏览器*/
HTML+CSS+JS实现遮罩层+Tabs效果
最新发布
chenyajundd的博客
07-22 1089
使用原生HTML、CSS和JavaScript，实现一个遮罩层效果，里面的内容垂直水平居中，并且内容是一个Tabs组件。您可以点击相应的Tabs切换到对应的内容。点击遮罩层可以隐藏它，点击Tabs右上角的关闭按钮也会隐藏遮罩层。话不多说，直接上代码！
html添加遮罩
热门推荐
代码即是生命的博客
11-04 1万+
html添加遮罩的代码如下所示 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;DIV CSS遮罩层&amp;lt;/title&amp;gt; &amp;lt;script language=&quot;javascript&quot; ty
关于HTML页面中的遮罩
weixin_34185364的博客
11-21 95
function layout() { if (document.compatMode == "BackCompat") { return { width: Math.max(document.body.scrollWidth, document.body.clientWidth), height: Math.max(document.bod...
html5 遮罩层 适用手机
07-22
您好！要在手机上使用HTML5遮罩层，您可以使用CSS和JavaScript来实现。以下是一个简单的示例： HTML： ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="mask"></div> <div id="content"> <!-- 页面内容 --> </div> <script src="script.js"></script> </body> </html> ``` CSS（style.css）： ```css #mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 设置背景颜色和透明度 */ display: none; /* 初始状态隐藏 */ } #content { /* 页面内容样式 */ } ``` JavaScript（script.js）： ```javascript window.addEventListener('load', function() { var mask = document.getElementById('mask'); var content = document.getElementById('content'); // 显示遮罩层 function showMask() { mask.style.display = 'block'; // 禁止页面滚动 document.body.style.overflow = 'hidden'; } // 隐藏遮罩层 function hideMask() { mask.style.display = 'none'; // 恢复页面滚动 document.body.style.overflow = 'auto'; } // 点击遮罩层以外的部分，隐藏遮罩层 mask.addEventListener('click', hideMask); // 示例：点击某个按钮显示遮罩层 var button = document.getElementById('button'); button.addEventListener('click', showMask); }); ``` 在上面的示例中，通过CSS设置了一个半透明的遮罩层（`#mask`），它覆盖整个页面，初始状态下是隐藏的。通过JavaScript监听事件，可以在需要的时候显示或隐藏遮罩层。您可以根据具体需求进行样式和逻辑的调整。 希望这可以帮助到您！如果您还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

缘不易

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值