div+css+js实现透明屏蔽当前页面，并弹出新层进行操作资源-CSDN下载

共12个文件

gif：5个

jpg：4个

url：1个

div+css+js

实现透明屏蔽当前页面，并弹出新层进行操作

5星 · 超过95%的资源需积分: 10 41 浏览量 2010-04-05 19:40:22 上传评论 1 收藏 16KB RAR 举报

在网页设计和开发中，"div+css+js 实现透明屏蔽当前页面，并弹出新层进行操作" 是一种常见的交互设计技术，用于提供更好的用户体验。这种方法通常用于创建模态对话框、提示框或者加载遮罩层，让用户专注于当前的任务，而不会被其他页面元素分心。下面将详细介绍这一技术的实现原理和关键知识点。 `div`是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); /* 透明黑色背景 */ z-index: 999; /* 遮罩层位于页面元素之上 */ } ``` 接着，我们使用`CSS`来创建弹出的新层，这个层通常包含一些提示信息、表单或者按钮等交互元素。比如，一个简单的弹出框可以这样设计： ```html <div id="dialog"> <div class="header">警告</div> <div class="content">这是一个警告对话框。</div> <div class="footer"> <button>确定</button> </div> </div> ``` ```css #dialog { position: fixed; z-index: 1000; /* 确保弹出层位于遮罩层之上 */ width: 300px; height: auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .header, .footer { background-color: #f0f0f0; text-align: center; padding: 10px; } .content { padding: 10px; } ``` 然后，通过`JavaScript`来控制遮罩层和弹出层的显示和隐藏。可以使用`addEventListener`监听用户的点击事件，或者根据特定条件自动触发弹出。例如，当用户点击某个按钮时显示弹出层： ```javascript document.getElementById('open-dialog').addEventListener('click', function() { document.getElementById('mask').style.display = 'block'; document.getElementById('dialog').style.display = 'block'; }); document.getElementById('close-dialog').addEventListener('click', function() { document.getElementById('mask').style.display = 'none'; document.getElementById('dialog').style.display = 'none'; }); ``` 在提供的文件名列表中，可以看到如`warning_header.gif`、`error_header.gif`、`success_header.gif`、`prompt_header.gif`这样的资源，这些可能是用于弹出层头部的图标，可以通过CSS的`background-image`属性将它们应用到对应的类或ID上，以增强视觉效果。例如： ```css .warning { background-image: url('warning_header.gif'); } .error { background-image: url('error_header.gif'); } .success { background-image: url('success_header.gif'); } .prompt { background-image: url('prompt_header.gif'); } ``` `dialog_close.gif`可能是一个关闭按钮的图标，可以将其添加到关闭按钮上。`error_bg.jpg`、`prompt_bg.jpg`、`success_bg.jpg`、`warning_bg.jpg`可能是对应不同类型的对话框背景图片，同样可以利用CSS进行应用。 "div+css+js 实现透明屏蔽当前页面，并弹出新层进行操作"是一种结合了HTML结构、CSS样式和JavaScript交互的实用技术，它使得网页的交互更加直观和用户体验更佳。通过合理的布局和动态控制，可以实现各种复杂的效果，满足不同场景的需求。

资源推荐

资源详情

资源评论

收起资源包目录

customer-dialog.rar （12个子文件）

warning_bg.jpg 3KB

dialog_close.gif 64B

warning_header.gif 151B

js脚本大全，js讨论社区.url 112B

success_header.gif 150B

prompt_header.gif 150B

dialog_box.js 5KB

prompt_bg.jpg 3KB

error_header.gif 151B

error_bg.jpg 3KB

index.html 7KB

success_bg.jpg 3KB

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript自定义弹出对话框 - 分享JavaScript-sharejs.com</title> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body> <div id="content"> <p> <a href="javascript:showDialog('Error','You have encountered a critical error.','error',2);">Error</a> | <a href="javascript:showDialog('Warning','You must enter all required information.','warning');">Warning</a> | <a href="javascript:showDialog('Success','Your request has been successfully received.','success');">Success</a> | <a href="javascript:showDialog('Confirmation','Are you sure you want to delete the entry?','prompt');">Prompt</a> </p> </div> <br><br> <div align="center"> <script language="javascript" src="http://www.sharejs.com/js/720.js"></script> <br><br> 获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a> </div> </body> </html>

评论收藏

内容反馈