JavaScript实现最简单的弹窗。

最新推荐文章于 2024-04-13 16:24:46 发布

安心写bug

最新推荐文章于 2024-04-13 16:24:46 发布

阅读量4.4k

点赞数 3

分类专栏： JavaScript 文章标签： JavaScript 弹窗 JavaScript基础 web

本文链接：https://blog.csdn.net/qq_36963372/article/details/82261747

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用css动画效果实现弹窗缓慢弹出和收回。

使用JavaScript实现定时弹出定时收回。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单弹窗</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .pop {
            width: 400px;
            height: 300px;
            position: fixed;
            bottom: 0;
            right: 0;
            display: none;
            animation: pop 1s ease-in-out 0s;
        }
        @keyframes pop {
            from {
                height: 0;
            }
            to {
                height: 300px;
            }
        }
        .down {
            width: 400px;
            height: 0;
            position: fixed;
            bottom: 0;
            right: 0;
            display: block;
            animation: out 1s ease-in-out;
        }
        @keyframes out {
            from {
                height: 300px;
            }
            to {
                height: 0;
            }
        }
        .img1 {
            width: 400px;
            height: 300px;
            vertical-align: top;
        }
    </style>
</head>
<body>
<div class="pop" id="pop">
    <img src="images/01.jpg" alt="" class="img1">
</div>
</body>
<script>
    window.onload = function () {
        timer = window.setInterval(imgBlock, 2000);
    };
    function imgBlock() {
        var pop = document.getElementById('pop');
        pop.style.display = 'block';
        timer2 = window.setInterval(imgNone,5000);
    }
    function imgNone() {
        var pop = document.getElementById('pop');
        pop.className = 'down';
        clearInterval(timer);
        clearInterval(timer2);
    }
</script>
</html>