(js特效) js代码实现弹出层

深藏阁楼爱情的钟 2023-10-16 23:21 8阅读 0赞

源代码：

<html>
    <head>
    <title>LIGHTBOX EXAMPLE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <style type="text/css">
              .black_overlay{
                 display: none; 
                 position: absolute;  
                 top: 0%;  
                 left: 0%;  
                 width: 100%;  
                 height: 100%;  
                 background-color: black;  
                 z-index:1001;  
                 -moz-opacity: 0.8;  
                 opacity:.80;  
                 filter: alpha(opacity=80);  
            } 
            .white_content {
                display: none;  
                position: absolute; 
                top: 25%; 
                left: 25%; 
                width: 50%; 
                height: 50%; 
                padding: 16px;
                border: 2px solid orange; 
                background-color: white; 
                z-index:1002;
                overflow: auto;
            }  
        </style>
        <script language="javascript">
            function openWindow(){
                document.getElementById('light').style.display='block';
                document.getElementById('fade').style.display='block';
            }
            function closeWindow(){
                document.getElementById('light').style.display='none';
                document.getElementById('fade').style.display='none';
            }
        </script>
    
    </head>
    <body>
        
        <p>可以根据自己要求修改css样式
        <input type="button" value="点击这里打开窗口" οnclick="openWindow()"/></p>
        </body>
        <div id="light" class="white_content">
         This is the lightbox content.
         <a href="#" onClick="closeWindow()"> Close</a></div>
        <div id="fade" class="black_overlay"></div>
        
    </html>

效果展示：

![Center][]

[Center]: https://img-blog.csdn.net/20160401115458755?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center