JavaScript的弹窗

最新推荐文章于 2024-03-19 20:40:53 发布

码上暴富

最新推荐文章于 2024-03-19 20:40:53 发布

阅读量114

点赞数

分类专栏： JavaScript小功能案例文章标签： javascript

本文链接：https://blog.csdn.net/weixin_53483257/article/details/122128012

版权

JavaScript小功能案例专栏收录该内容

21 篇文章 0 订阅

订阅专栏

JavaScript的弹窗

JavaScript的弹窗

JavaScript的弹窗

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js的弹窗</title>
</head>
<!-- 弹窗的css -->
<style>
    #alert-box{
        width: 100%;
        height: 100%;
        /*border-top-left-radius: 10px;*/
        /*border-top-right-radius: 10px;*/
        background: #f5f5f5;
        position: fixed;
        left: 100%;
        bottom: 0;
        top: 0;
    }
    #alert-box .header{
        padding: 10px;
        box-sizing: border-box;
        position: relative;
        height: 40px;
        background-color: #fff;
    }
    #alert-box .header .headerTitle{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    @keyframes slideUp {
        from{
            left: 0;
        }
        to{
            left: 100%;
        }
    }
    @keyframes slideDown {
        from{
            left: 100%;
        }
        to{
            left: 0;
        }
    }
    #alert-box #close{
        font-size: 16px;
    }
    #alert-box .alert-content{
    }
    #alert-box .alert-content {
        background-color: #f5f5f5;
    }
    #alert-box .alert-content .commit-box {
        padding: 0 10px;
        margin-top: 20px;
    }
    #alert-box .alert-content .commit-box .commit {
        display: block;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: #06f;
        border-radius: 5px;
        color: #fff;
    }
</style>
<body>
<div class="Index">
    <button class="btn">click me</button>
    <!-- 弹窗 -->
    <div id="alert-box">
        <div class="header">
            <span id="close">&lt;&nbsp;取消</span>
            <span class="headerTitle">标题</span>
        </div>
        <div class="alert-content">
            <div>我是内容</div>
            <div class="commit-box">
                <span class="commit">提交</span>
            </div>
        </div>
    </div>
</div>
</body>
<!--JQuery-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    window.onload = function () {
        // 弹窗
        $('.btn').click(function () {
            $("#alert-box").animate({
                left: "0%",
                animation: "slideDown 0.5s 1 normal forwards",
            }, 500);
        });
        $('#close').click(function () {
            $("#alert-box").animate({
                left: "100%",
                animation: "slideDown 0.5s 1 normal forwards",
            }, 500);
        });
        // 提交
        $('.commit').click(function () {
            $("#alert-box").animate({
                left: "100%",
                animation: "slideDown 0.5s 1 normal forwards",
            }, 500);
        })
    };

</script>
</html>

结果

执行中	执行结束

码上暴富

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript的弹窗

JavaScript的弹窗JavaScript的弹窗JavaScript的弹窗<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
复制链接

扫一扫