js制作弹出层

来源：互联网发布：linux snmpwalk 命令编辑：程序博客网时间：2024/06/06 00:23
<!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=utf-8" />        <title>无标题文档</title>        <style type="text/css">            * {                margin:0;                padding:0;            }            #one {                position:absolute;                top:0;                left:0;                width:100%;                height:100%;                background:#000;                opacity:0.4;                filter:alpha(opacity=50);                display:none            }            #two {                position:absolute;                top:200px;                left:450px;                width:400px;                height:200px;                background:#fff;                border:2px solid #ffcc33;                display:block;                display:none            }            h2 {                text-align:right;                background:#ccff00;                border-bottom:3px solid #ccff00;                padding:5px;            }        </style>        <script type="text/javascript">            window.onload = function () {                var oOne = document.getElementById("one");                var oTwo = document.getElementById("two");                var oBtn = document.getElementById("btn");                var oClose = document.getElementById("close")                oBtn.onclick = function () {                    oOne.style.display = "block";                    oTwo.style.display = "block"                }                oClose.onclick = function () {                    oOne.style.display = "none";                    oTwo.style.display = "none"                }            }        </script>    </head>        <body>        <div id="one">背景</div>        <div id="two">            <h2><span id="close">×</span></h2>这是弹出框</div>        <div>            <button id="btn">点击一下</button>        </div>    </body></html>