DIV+CSS实现弹出窗口隐藏/显示效果+背景变暗
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DIV+CSS实现弹出窗口隐藏/显示效果+背景变暗相关的知识，希望对你有一定的参考价值。
DIV+CSS实现弹出窗口隐藏/显示效果+背景变暗高手提供一个DIV+CSS实现弹出窗口并且此窗口可以打开关闭。最好当打开的时候div外背景可以成灰色。
jQuery Lightbox Plugin 这个jq的框架就是这么的效果。。。你看一下。http://www.qianduan.net/top-10-jquery-lightbox-scripts.html
这种就是点击弹出窗口，可以关闭，背景变暗，你所说的这几个需求都满足了。
补充：
还有这段代码。你试一下吧。
<!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" lang="zh-CN">
<head>
<!-- meta data -->
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<meta name="author" content="在远方@www.jscode.cn" />
<meta name="Copyright" content="Copyright (c) jscode.cn" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<meta name="description" content="网页特效观止" />
<meta name="keywords" content="网页特效,网页特效代码" />
<!-- site title -->
<title>点击弹出窗口层，并且背景变暗渐变---网页特效观止|www.jscode.cn|网页特效代码</title>
<style>
body font-size:12px;background:#9EC7E7
img border:0px
#msgDiv
z-index:10001;
width:500px;
height:400px;
background:white;
border:#336699 1px solid;
position:absolute;
left:50%;
top:20%;
font-size:12px;
margin-left:-225px;
display: none;
#bgDiv
display: none;
position: absolute;
top: 0px;
left: 0px;
right:0px;
background-color: #777;
filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)
opacity: 0.6;
</style>
<script type="text/javascript">
function showDetail() //在远方www.jscode.cn
//背景
var bgObj=document.getElementById("bgDiv");
bgObj.style.width = document.body.offsetWidth + "px";
bgObj.style.height = screen.height + "px";
//定义窗口
var msgObj=document.getElementById("msgDiv");
msgObj.style.marginTop = -75 + document.documentElement.scrollTop + "px";
//关闭
document.getElementById("msgShut").onclick = function()
bgObj.style.display = msgObj.style.display = "none";
msgObj.style.display = bgObj.style.display = "block";
msgDetail.innerHTML="<p align=center>小窗口里的内容</p><p align=center><A href=http://www.jscode.cn><FONT color=#0000ff>网页特效观止</FONT></A></p>"
</script>
</head>
<body>
<div id="msgDiv">
<div id="msgShut">
关闭</div>
<div id="msgDetail">
</div>
</div>
<div id="bgDiv">
</div>
<p> </p>
<p><a href="#" onClick="showDetail()">点击我试试看</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>更多网页特效代码尽在 <a href="http://www.jscode.cn/">网页特效观止</a></p>
</body>
</html> 参考技术A 提供思路：用JS来实现是最简单的
如果非要是纯DIV+CSS，那就是在<a>里作文章喽
把要控制的DIV写在a里面
a,a:visiteddisplay:none
a:hoverdisplay:block
不过也是鼠标移动上去产生的效果 参考技术B 百度一下弹出框就有很多例子啦，比这样来的快、
鼠标经过弹出div
我想实现这样的效果，鼠标滑过，弹出一个div，能够点击里面的链接，鼠标移开后，div消失。
<style>
.aawidth:100px;height:30px;position:relative
.aa .bbwidth:100px;height:60px;position:absolute;display:none;border:1px solid #ddd;top:30px;left:0
.aa:hover .bbdisplay:block
</style>
<div class="aa">移到我上面看看
<div class="bb">显示结果</div>
</div>本回答被提问者和网友采纳
以上是关于DIV+CSS实现弹出窗口隐藏/显示效果+背景变暗的主要内容，如果未能解决你的问题，请参考以下文章