zoukankan      html  css  js  c++  java
  • 点击弹出窗口层,并且背景变暗渐变

    <!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>
    <title>点击弹出窗口层,并且背景变暗渐变</title>
    <style>
    body {font-size:12px;background:#9EC7E7}
    img {border:0px}
    #msgDiv {
    z-index:10001;
    400px;
    height:387px;
    background:#ffeef2;
    background-image: url(img/2.jpg);
    border:#336699 1px solid;
    position:absolute;
    left:53%;
    top:30%;
    font-size:12px;
    margin-left:-225px;
    display: none;
    }
    #bgDiv {
    display: none;
    position: absolute;
    top: 0px;      //全屏背景
    left: 0px;
    right:0px;
    background-color: #777;
    filter:alpha(opacity=50);
    -moz-opacity:0.50;
    opacity:0.50;
    height:100%;
    }
    </style>
    <script type="text/javascript">
    //
    function showDetail() {
    var bgObj=document.getElementById("bgDiv");//背景
    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></p>"
    }
    </script>
    </head>

    <body>

    <div id="msgDiv">
    <div id="msgShut" align="right"><br> <a href="#" style="color:#FF9900">关闭</a> </div>
    <div id="msgDetail">
    <Form id="form1" name="form1" method="post" action="">
    <table width="277" height="141" border="0" align="center">
    <tr><td width="89" height="26"> </td>
    <td width="172"> </td>
    </tr>
    <tr>
    <td width="89" height="27">用户名:</td>
    <td width="172"><input type="text" size="15" value="" /></td>
    </tr>
    <tr>
    <td width="89" height="26">密码:</td>
    <td width="172"><input type="password" size="15" value="" /></td>
    </tr>
    <tr>
    <td height="15"> </td>
    <td> </td>
    </tr>
    <tr>
    <td width="89" height="29">新用户注册</td>
    <td width="172"><input type="image" src="img/5.jpg" /></td>
    </tr>
    </table>

    <p> </p>
    </form>
    </div>
    </div>
    <div id="bgDiv"></div>
    <p> </p>
    <p><a href="#" onClick="showDetail()">点击我试试看</a></p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    </body>
    </html>

  • 相关阅读:
    hdu 5366 简单递推
    hdu 5365 判断正方形
    hdu 3635 并查集
    hdu 4497 数论
    hdu5419 Victor and Toys
    hdu5426 Rikka with Game
    poj2074 Line of Sight
    hdu5425 Rikka with Tree II
    hdu5424 Rikka with Graph II
    poj1009 Edge Detection
  • 原文地址:https://www.cnblogs.com/rainbow661314/p/3158953.html
Copyright © 2011-2022 走看看