实现网页蒙板效果和弹出层的html示例资源-CSDN下载

共1个文件

html：1个

5星 · 超过95%的资源需积分: 50 39 浏览量 2015-07-28 13:21:14 上传评论 1 收藏 1KB RAR 举报

在网页设计中，蒙板效果和弹出层是常见的交互元素，它们用于提供信息提示、用户确认或展示详细内容。本示例将详细介绍如何利用HTML和JavaScript实现这样的功能。我们来理解“蒙板效果”（Mask Effect）。蒙板通常是一个半透明的覆盖层，覆盖在网页内容上，用于突出显示特定区域或阻止用户与背景内容进行交互。在HTML中，我们可以创建一个全屏的div元素，并通过CSS设置其背景颜色和透明度来实现蒙板效果。例如： ```html <div id="mask"></div> ``` ```css #mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 透明黑色蒙板 */ display: none; /* 默认隐藏 */ } ``` 接下来是“弹出层”（Popup Layer），它是在页面上独立显示内容的一个区域，可以包含文本、图片或其他HTML元素。弹出层可以通过JavaScript控制显示和隐藏，与蒙板结合使用，可以创建更好的用户体验。以下是一个简单的HTML弹出层结构： ```html <div id="popup"> <div class="content">  </div> </div> ``` 为了使弹出层在页面上定位，我们可以使用CSS的绝对定位： ```css #popup { position: fixed; visibility: hidden; /* 默认隐藏 */ z-index: 9999; /* 高于页面其他元素 */ } .popup .content { position: relative; /* 可以在弹出层内部自由定位内容 */ padding: 20px; background-color: #fff; /* 提供对比色，以便内容清晰可见 */ border-radius: 5px; } ``` 现在，我们需要用JavaScript来控制蒙板和弹出层的显示和隐藏。这里有一个简单的示例，使用了JavaScript的DOM操作和事件监听： ```html <button onclick="showPopup()">显示弹出层</button> <script> function showPopup() { var mask = document.getElementById('mask'); var popup = document.getElementById('popup'); mask.style.display = 'block'; // 显示蒙板 popup.style.visibility = 'visible'; // 显示弹出层 // 添加关闭弹出层的事件监听 document.querySelector('.close-btn').addEventListener('click', hidePopup); } function hidePopup() { var mask = document.getElementById('mask'); var popup = document.getElementById('popup'); mask.style.display = 'none'; // 隐藏蒙板 popup.style.visibility = 'hidden'; // 隐藏弹出层 } </script> ``` 在这个示例中，当点击按钮时，`showPopup`函数会被调用，显示蒙板和弹出层。弹出层内可以包含关闭按钮，当点击该按钮时，`hidePopup`函数会隐藏蒙板和弹出层。以上就是实现网页蒙板效果和弹出层的基本步骤。你可以根据实际需求调整CSS样式和JavaScript逻辑，例如添加动画效果、调整蒙板透明度或弹出层位置等。这个示例中的"实现蒙板效果的js.html"文件应该包含了上述代码，你可以下载并查看具体实现。通过实践和学习，你将能够更熟练地运用这些技术来增强网页的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

实现蒙板效果的js.rar （1个子文件）

实现蒙板效果的js.html 3KB

<html> <head> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script type="text/javascript"> //获得坐标 function getPosition() { var top = document.documentElement.scrollTop; var left = document.documentElement.scrollLeft; var height = document.documentElement.clientHeight; var width = document.documentElement.clientWidth; //top=500; left = 200; //height=0; width = 500; height=300; top=200; return { top: top, left: left, height: height, width: width }; } //屏蔽输入，显示蒙板 function showMask(id) { var obj = document.getElementById(id); obj.style.width = document.body.clientWidth; obj.style.height = document.body.clientHeight; obj.style.display = "block"; } //隐藏蒙板 function hideMask(id) { document.getElementById(id).style.display = "none"; } //显示登录 function showPop(id) { showMask('mask'); var width = 300; //弹出框的宽度 var height = 170; //弹出框的高度 var obj = document.getElementById(id); obj.style.display = "block"; obj.style.position = "absolute"; obj.style.zindex = "10"; obj.style.overflow = "hidden"; obj.style.width = width + "px"; obj.style.height = height + "px"; var Position = getPosition(); leftadd = (Position.width - width) / 2; topadd = (Position.height - height) / 2; obj.style.top = (Position.top + topadd) + "px"; obj.style.left = (Position.left + leftadd) + "px"; window.onscroll = function() { var Position = getPosition(); obj.style.top = (Position.top + topadd) + "px"; obj.style.left = (Position.left + leftadd) + "px"; }; } //隐含 function hidePop(id) { hideMask('mask'); document.getElementById(id).style.display = "none"; } </script> </head> <body> <div> <input type="button" value="测试弹出层" onclick="showPop('tcc')"/> </div>  <div id="mask" style="filter: Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; background-color: #000; width: 100%; height: 100%; z-index: 5px; position: absolute; left: 0; top: 0; display: none; overflow: hidden;"> </div>   <div id="tcc" style="display:none;background-color:#00ffff;"> <input type="button" id="test" value="隐藏弹出层" onclick="hidePop('tcc');"/> </div> </body> </html>

评论收藏

内容反馈