仿bootstrap模态框效果从底部弹出模态框

最新推荐文章于 2021-04-07 17:13:00 发布

acvc225

最新推荐文章于 2021-04-07 17:13:00 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签： jquery html

本文链接：https://blog.csdn.net/acvc225/article/details/105968717

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现模态框效果
1、点击按钮后，模态框自底部向上弹出
2、模态框弹出后，背景要有一个遮罩效果，并且模态框本身要遮住按钮
3、点击模态框遮罩背景后，模态框自上而下隐藏

因为对前端不熟悉，本想找一些源码，省得自己再研究，结果baidu出来的基本都惨不忍睹，只能自己再花点时间去研究，其实是很简单的一段代码。（顺便吐槽一下，为什么网上那么多人总是贴一些乱七八糟的代码出来呢？）

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>模态框底部弹出效果</title>
</head>

<body>
<div>
    <p>不重要内容，衬托遮罩显示效果</p>
    <p>不重要内容，衬托遮罩显示效果</p>
    <p>不重要内容，衬托遮罩显示效果</p>
</div>

<!--点击显示模态框按钮-->
<input type="submit" id="btnshow" value="显示模态框" style="position: fixed; bottom: 0;">

<!--模态框内容模块-->
<div id="showModal" style="height:300px;width: 100%; position: fixed; left: 0; bottom: 0;display: none; background-color: #fff; z-index: 200;">
    <div>模态框</div>
</div>

<!--遮罩层-->
<div id="modalOuter" style="opacity: 0.5; position: fixed;top: 0; left: 0;width: 100vw; height: 100vh; z-index: 100; background-color: #000; display: none;"></div>

</body>


<!--引入你本地的juqery.js文件-->
<script src="style/lib/js/jquery.js"></script>
<script>

    //弹出底部模态框
    $("#btnshow").click(function () {
        $("#showModal").animate({
            height: "show",
        }, 1000 );
        $("#modalOuter").show();
    });

    //隐藏底部模态框
    $("#modalOuter").click(function () {
        $("#showModal").animate({
            height: "hide",
        }, 1000 );
        $(this).hide();
    });

</script>
</html>