原生js 弹出框;弹出效果定时关闭

最新推荐文章于 2024-05-14 18:07:15 发布

置顶嗨-王先森

最新推荐文章于 2024-05-14 18:07:15 发布

阅读量1.1k

点赞数 2

文章标签： js 弹出框定时器 html css

本文链接：https://blog.youkuaiyun.com/WXianShen/article/details/102788260

版权

关于原生js的弹出框样式淡出淡入效果;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
        <title>点击文字弹出一个DIV层窗口代码</title> 
        <style> 
        /* 遮罩层 */
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: rgb(0, 0, 0);
            z-index:1001;
            opacity:0.8;
        }
        /* 显示层 */
        .white_content { 
            display: none; 
            position: absolute; 
            top: 0%; 
            left: 0%; 
            bottom: 0%;
            right: 0%;
            margin: auto;
            width: 50%; 
            height: 50%; 
            padding: 20px; 
            border: 10px solid orange; 
            background-color: white; 
            z-index:1002; 
        } 
        /* 
               setTimeout("fade.style.display='none'",5000);
               setTimeout("light.style.display='none'",5000); 
               定时关闭弹出提示框
               */
               这个不使用可以删掉`````是用来定时关闭弹出框
    </style> 
    </head> 
    <script>
       function my(){
        document.getElementById("light").style.display="block";
        document.getElementById("fade").style.display="block";
       }
       function mt(){
        document.getElementById("light").style.display="none";
        document.getElementById("fade").style.display="none";
       }
    </script>
    <body> 
        <p>示例弹出层：
            <a href = "javascript:void(0)" onclick = "my()">请点这里</a>
        </p> 


        <div id="light" class="white_content">这是一个层窗口示例程序. 

        <a href = "javascript:void(0)" onclick = "mt()">点击关闭</a>

        </div> 
        
        <div id="fade" class="black_overlay"></div> 
    </body> 
</html>

作为一个初学者希望和大家多交流探讨;