点击弹出窗口,并且背景变暗渐变

1.用JS实现
<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;//如果position: absolute;被注释,top:等属性将不起作用
    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="

小窗口里的内容

网页特效观止

" } 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>



2.jquery实现






 #to_click_img{
z-index:1;/*用来是鼠标上去时只在这一层,而不是会重叠,明明是选中一个,连底层的也选中。只要在层这个容器里写就好了,在tabel里无效*/
position:absolute;
/*display:block;没影响*/
left:550px;
top:270px;

#fudon_tab{
position:absolute;
background:#FFFFFF center;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
width:300px;
height:186px;
/*border-color:#0066cc;
border-style:solid;*/
border-collapse:collapse;
}

#fudon_tab td{ 
background:url(lcon.png) no-repeat 35px 9px  ;
border: #0066cc 1px solid;
font: 14px "宋体";
text-align:center;
color:#0066cc;
width:100px;
height:62px;
}

}
效果:

你可能感兴趣的:(js,jquery,html,css)