网页弹出层与背景变暗效果的JavaScript实现

162 浏览量更新于2024-08-31 收藏 49KB PDF 举报

"这篇文章主要介绍了如何实现点击弹出层效果以及弹出窗口后网页背景变暗的代码实现，适用于需要创建交互式网页效果的开发者。" 在网页设计中，弹出层和背景变暗效果是一种常见的增强用户体验的手段。当用户点击某个元素时，弹出一个窗口展示相关信息，同时背景变暗，可以有效聚焦用户的注意力在弹出的内容上。这篇文档提供了一段HTML和CSS代码，用于实现这样的功能。首先，我们需要在`<head>`标签内添加CSS样式。这段代码定义了两个类：`.black_overlay`和`.white_content`。`.black_overlay`用于创建一个全屏的黑色遮罩，其透明度设置为80%，这样可以使得背景变暗但又不至于完全看不见。`.white_content`则是弹出层的主体，它有固定的宽度和高度，设置了内边距、边框和背景颜色，并且具有一定的z-index值，确保它位于遮罩之上。接着，在`<body>`标签内，创建一个链接`<a>`，当用户点击这个链接时，通过JavaScript调用`onclick`事件，显示`id`为`light`的弹出层和`id`为`fade`的黑色遮罩。`onclick`事件中使用的JavaScript代码如下： ```javascript document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'; ``` 这里的`light`和`fade`分别对应`div`元素的ID，通过修改`display`属性为`block`，可以使这些元素在页面上可见。弹出层`white_content`内部还可以包含其他内容，比如关闭按钮。关闭按钮的`onclick`事件中，同样使用JavaScript隐藏这两个元素： ```javascript onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" ``` 这个实现基于HTML、CSS和少量JavaScript，简单易懂，适用于快速创建具有弹出层和背景变暗效果的网页。开发者可以根据自己的需求调整样式和布局，以适应不同的应用场景。例如，可以改变弹出层的大小、位置、颜色，或者调整遮罩的透明度，以达到更理想的视觉效果。

点击弹出层效果点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码弹出窗口后网页背景变暗效果的实现代码

本篇文章主要是对点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码进行了介绍，需要的朋友可以过来

参考下，希望对大家有所帮助

复制代码代码如下:

<html>

<head>

<title>网页特效-窗口特效-弹出窗口后网页背景变暗的效果</title>

.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-

index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}

.white_content{display:none;position:absolute;top:25%;left:25%;width:50%;height:50%;padding:16px;border:3px solid

orange;background-color:white;z-index:1002;overflow:auto;}

</style>

</head>

<body>

<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';

document.getElementById('fade').style.display='block'">

点击这里打开窗口</a>

<a href="javascript:void(0)"

onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">

Close</a>

<br>窗口内容

</div>

</body>

</html>

例二：例二：

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

function hid()

{

var div4=document.getElementById("div1");

div4.style.display="block";

div4.style.width="200px";

div4.style.height="150px";

div4.style.zIndex="9999";

div4.style.top="43%";

div4.style.left="43%";

div4.style.position="absolute";

var div3=document.getElementById("div2");

div3.style.display="block";

div3.style.width="1000px";

div3.style.zIndex="9998";

div3.style.position="absolute";

div3.style.height=document.body.offsetHeight;

div3.style.top="0px";

div3.style.left="0px";

}

function vis()

{

var div4=document.getElementById("div1");

div4.style.display="none";

var div3=document.getElementById("div2");

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38703123

粉丝: 3
资源: 944

网页弹出层与背景变暗效果的JavaScript实现

超好的点击后弹出窗口代码，背景变黑

51单片机入门系列视频中用的资料&相关仿真文件&源代码.zip

学习html&css&javascript.zip

A= ( \matrix {1&3&2 1&-1&3 2&0&1} ) ,B= ( \matrix {4&0&11 1&-1&3 2&0&1} )已

http://i.tianqi.com/index.php?c=code&id=38&icon=1&num=2&align=left

org.junit.AssumptionViolatedException: got: &lt;false&gt;, expected: is &lt;true&gt;

if ( amp;isEmpty == 1 && isLegal == 1)

&怎么声明

&和&&的区别 java

&符号保存到mysql数据库中会自动变为&如何去除&符号后边的amp;

最新资源

org.junit.AssumptionViolatedException: got: <false>, expected: is <true>