提示框弹出层-CSDN博客

本文链接：https://blog.csdn.net/lxl_sports/article/details/3530754

 
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>弹出层</title>
        <style type="text/css">
    #tip
    {
        position: absolute;
        right: 0px;
        bottom: 0px;
        height: 0px;
        width: 180px;
        border: 1px solid #D5D7CD;
        background-color: #D5D7CD;
        padding: 1px;
        overflow: hidden;
        display: none;
        font-size: 12px;
        z-index: 10;
    }
    #shadow
    {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #EAEBE6;
        z-index: 11;
        filter: Alpha(Opacity=70);
        display: none;
        overflow: hidden;
    }
    #detail
    {
        width: 500px;
        height: 200px;
        border: 3px double #ccc;
        background-color: #FFFFFF;
        position: absolute;
        z-index: 30;
        display: none;
        left: 30%;
        top: 30%;
    }
    </style>
    <script language="javascript" type="text/javascript" >
    function showwin() 
    { 
        document.getElementsByTagName("html")[0].style.overflow = "hidden"; 
        document.getElementById("shadow").style.display="block"; 
        document.getElementById("detail").style.display="block"; 
    } 
    
    function recover() 
    { 
        document.getElementsByTagName("html")[0].style.overflow = "auto"; 
        document.getElementById("shadow").style.display="none"; 
        document.getElementById("detail").style.display="none"; 
    } 
    </script>
    
</head>
<body onload="document.getElementById('tip').style.height='0px'">
    <form id="form1" runat="server">
        <div id="shadow">
        </div>
        <div id="detail">
            <input id="Button2" type="button" onclick="recover()" value="关闭" />
            详细内容~~！！
        </div>
        <div id="tip">  
        </div>
        <p>
            <a href="#" onclick="showwin()">点击这里测试</a><br />
        </p>
    </form>
</body>
</html>
 